本机Javascript不会在DOM上附加元素

Question

我有一个用Expression Engine构建的网站。 在后端，有一个代码段，用于处理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不是函数

node.insertBefore（span）;

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

Answer 1

getElementsByClassName将返回没有方法insertBefore array-like节点列表。

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> 

Answer 2

document.getElementsByClassName("top-arrow")将返回实时HTMLCollection 。 您可以像数组一样使用它：

node = document.getElementsByClassName("top-arrow")[0];

另外，如果您希望新节点出现在 top-arrow 之前 ，则需要执行以下操作：

node.parentNode.insertBefore(span, node);

由于它是node没有子node ，因此无需执行insertBefore 。

即使您的HTML代码没有内容和头部，浏览器也会“修复”您的HTML并添加一个。

我会这样写你的代码：

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

var node = document.getElementsByClassName("top-arrow")[0];
node.parentNode.insertBefore(span, node);

Answer 3

函数getElementsByClassName()返回一个包含指定类节点的数组。 如果要insertBefore或附加任何内容，则需要指定此数组中元素的索引。 另外，insertBefore在函数调用中需要两个参数（elementToInsert，elemenBeforeWhichYouWantToInsert）。 因此，这样的事情应该起作用：

document.getElementsByClassName('top-arrow')[0].insertBefore(element, beforeWhatToInsert);

Answer 4

谢谢大家的宝贵意见。 通过简单地复制页面的动态部分并实际上在Expression Engine的后端中创建一个新模板，我无需操纵DOM元素即可解决此问题。