javascript - native Javascript 不会在 DOM 上附加元素

Question

我有一个用表达式引擎构建的网站。在后端有一个代码片段，负责处理 JavaScript 请求并根据该请求构建页面。

1. 我有一个没有 head 标签的 HTML 页面。
2. 此页面没有样式

示例:

<div class="top-arrow"><p><!--- Rest of code --></p>
</div>
<!-- Html page continues-->

我在尝试中添加了以下代码，但它似乎不起作用。

var span = document.createElement("span"); //Test element
span.textContent = "A <span> element.";

var node = document.getElementsByClassName("top-arrow");
node.insertBefore(span);

以下是我得到的:

TypeError: node.insertBefore is not a function

node.insertBefore(span);

如何最好地使用纯 JavaScript 在 div 之前附加文本。

Answer 1

getElementsByClassName will return array-like node-list which does not have method insertBefore

Node.insertBefore(newNode, referenceNode)方法将指定节点插入到引用节点之前作为当前节点的子节点(如果referenceNode为null，则将newNode插入到子节点列表的末尾)

注意: referenceNode 不是一个可选参数，如果没有 ant ref 节点，则传递 null

试试这个:

var span = document.createElement("span");
span.textContent = "A <span> element.";

var node = document.getElementsByClassName("top-arrow")[0];
//_____________________________________________________^^(Get the first element from collection)
node.insertBefore(span, null);

<div class="top-arrow">
  <p>
  </p>
</div>