將HTML添加到容器的末尾：使用JavaScript執行此操作的正確方法是什么？

Question

我有點像web dev n00b，所以我這樣做：

document.getElementById("some_element").innerHTML += "<p>Here's some more that will be added to the end of the HTML that composes some_element</p>";

但是，我猜測有一種更純粹的方法來完成修改內部HTML的任務。 這樣做的標准方法是什么？ 我假設當我在互聯網論壇上發布內容時會發生這種程序。 所以，知道它是一件很重要的事情。

Answer 1

我建議在innerHTML使用appendChild

myDiv = document.getElementById("myid");
myNewNode = document.createElement("div")
myContent = document.createTextNode("text of new div");
myNewNode.appendChild(myContent);
myDiv.appendChild(myNewNode);

innerHTML將刪除元素中現有節點上的偵聽器。 appendChild保留它們。

Answer 2

如果要通過HTML標記創建和追加節點，請使用.insertAdjacentHTML() 。

elem.insertAdjacentHTML("beforeend", "<p>Here's some more that will be added to the end of the HTML that composes some_element</p>");

---

否則，使用DOM創建/操作方法。

elem.appendChild(document.createElement("p"))
    .appendChild(document.createTextNode("Here's some more that will be added to the end of the HTML that composes some_element"));