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

Question

我有點Web開發的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

我建議使用appendChild超過innerHTML

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"));