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

我有一个内置在Expression Engine中的网站。在后端，有一个代码段，用于处理JavaScript请求并根据该请求构建页面。


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


样品：

<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不是函数
  
  node.insertBefore（span）;


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

最佳答案

getElementsByClassName将返回没有方法array-like的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>