本機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元素即可解決此問題。