文件物件模型(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 來複製節點的內容。
範例: