Published in
4 min readMar 14, 2020
文件物件模型（Document Object Model 簡稱 DOM） — 筆記三
JavaScript DOM Manipulating (新增、修改、刪除 DOM 節點)
除了在 DOM-筆記二，提過的 innerHTML 、innerText 、textContent、outerHTML可以用來改變 DOM 的結構和內容之外，在這一篇文章會介紹其他新增、修改和刪除 DOM 節點的方法。
document.createElement(tagName)
document.createElement(tagName) 方法來建立一個新的 HTML 元素。
範例:
document.createTextNode(str)
document.createTextNode(str) 方法來建立一個新的文字節點 (text node)。
範例:
ParentNode.appendChild(aChild)
DOM 節點的 appendChild(aChild) 方法，用來新增至子層到現有子元素的最後面。
範例:
appendChild(aChild)也可以用來移動 DOM 元素的位置，如下圖。
ParentNode.insertBefore(newNode, referenceNode)
DOM 節點的 insertBefore(newNode, referenceNode) 方法，用來將一個新的元素加到某個元素的前面。
範例:
insertBefore(newNode, referenceNode) 也可以用來移動 DOM 元素的位置，如下圖。
ParentNode.removeChild(child)
removeChild(child) 方法由父層(ParentNode)來移除子層(child) 節點。
範例:
ParentNode.replaceChild(newChild, oldChild)
replaceChild(newChild, oldChild)方法用新節點來取代某個舊節點，這個新節點可以是某個已存在的節點或是新節點。
範例:
Node.cloneNode(deep)
cloneNode(deep) 方法可以用來複製一個節點。
(deep) 預設不會複製節點的內容，可以傳入參數 true 來複製節點的內容。
範例:
