無法使用 appendChild 和 getElementById 將文本節點添加到 div 類

Question

嘗試使用腳本將文本添加到現有的 div 元素。 它應該向 id 為“TopBarContainer”的元素添加文本，但是當我運行腳本時沒有任何反應。

我測試了創建文本並在運行腳本時將其添加到文檔正文中，以確保腳本調用或文本/文本容器的創建沒有問題，並且效果很好。

我對 html 和 javascript 很陌生。 這看起來應該很簡單，但是我查看了關於 W3 的教程，搜索了堆棧溢出，並查看了有關 appendChild 和 getElementById 的一些信息，但無法弄清楚我錯過了什么。

腳本的相關部分：

<div class="top" id= "TopBarContainer">
    <img src="webibarmax.png" id="topbar" title="The bar" alt="Superbar">
</div>

<script>
    myScript() {
    var TextContainer = document.createElement("p");
    var TextItem = document.createTextNode("textextext");
    TextContainer.appendChild(TextItem);

    document.getElementById("TopBarContainer").appendChild(TextContainer);
        

    document.body.appendChild(TextContainer);}

</script>

Answer 1

 var TextContainer = document.createElement("p"); var TextItem = document.createTextNode("textextext"); TextContainer.appendChild(TextItem); document.getElementById("TopBarContainer").appendChild(TextContainer); document.body.appendChild(TextContainer);

 <div class="top" id="TopBarContainer"> <img src="webibarmax.png" id="topbar" title="The bar" alt="Superbar"> </div>

從上面的代碼片段可以看出，您的代碼似乎運行良好。

根據文檔，您不能像在示例中那樣引用同一節點兩次（一次在 div 中，另一次在正文中：

如果給定的孩子是對文檔中現有節點的引用，則 appendChild() 將其從當前位置移動到新位置

這可能是您遇到的問題嗎？

Answer 2

var TextContainer = document.createElement("p");
var TextItem = document.createTextNode("textextext");
TextContainer.appendChild(TextItem);

document.getElementById("TopBarContainer").appendChild(TextContainer);

您不需要將 TextContainer 元素附加到正文。