[Back To Basic] Javascript - DOM Nodes

新增節點

• 建立元素
• 附加元素

const div1 = document.createElement('div'); // 建立元素

const text1 = document.createTextNode('This is my div'); // 建立文字節點

div1.appendChild(text1); // 附加文字

document.body.appendChild(div1); // 附加元素到body

insertBefore()

附加元素都會在最後面，若想新增再最前面可用 insertBefore()

語法: parent.insertBefore(newChild, refChild);

parent: 父節點

newChild: 新增的節點

refChild: 參考的節點

新增的節點，會新增在參考的節點之前

const text2 = document.createTextNode('This is my second setence.');

div1.insertBefore(text2, text1);

刪除節點

• 刪除元素

div1.removeChild(text1);

刪除時一定要知道"父節點"是誰，很麻煩。

最常使用的解決方式(找出自己的父節點，再刪除自己)：

text1.parentNode.removeChild(text1); // 刪除text1

替換節點: replaceChild()

語法: parent.replaceChild(newChild, refChild);

parent: 父節點

newChild: 新增的節點

refChild: 要被替代的節點

const text3 = document.createTextNode('My new text3.');

div1.replaceChild(text3, text2);

source code