JavaScript DOM Manipulating (新增、修改、刪除 DOM 節點)

除了在這邊提過的 innerHTML, innerText, textContent 和 outerHTML 可以用來改變 DOM 的結構和內容之外，我們在這一篇文章會介紹其他新增、修改和刪除 DOM 節點的方法。

document.createElement(tagName)

document.createElement 方法用來建立一個新的 HTML 元素。

例如：

// 建立一個新的 <div>
var newDiv = document.createElement('div');

document.createTextNode(str)

document.createTextNode 方法用來建立一個新的文字節點 (text node)。

用法：

var newtext = document.createTextNode('I love www.fooish.com!');

ParentNode.appendChild(aChild)

DOM 節點的 appendChild 方法，用來新增一個新的子元素到現有子元素的最後面。

範例：

<div id="foo"><span>hello</span></div>

<script>
    // 建立一個新 <div>
    var newDiv = document.createElement('div');

    // 建立一個新的文字節點
    var newContent = document.createTextNode('I love www.fooish.com!');

    // 將文字節點加到剛建立的 <div> 元素中
    newDiv.appendChild(newContent);

    // 取得目前頁面上的 foo 元素
    var currentDiv = document.getElementById('foo');

    // 將剛建立的 <div> 元素加入 foo 元素中
    currentDiv.appendChild(newDiv);

    // 顯示 <span>hello</span><div>I love www.fooish.com!</div>
    alert(currentDiv.innerHTML);
</script>

appendChild 也可以用來移動 DOM 元素的位置：

<div id="container"><div id="foo"></div><div id="bar"><span id="s1">hello</span><span id="s2">world</span></div></div>

<script>
    // 取得目前頁面上的 foo 元素
    var foo = document.getElementById('foo');

    // 取得目前頁面上的 s1 元素
    var s1 = document.getElementById('s1');

    // 將 s1 元素放到 foo 元素中最後面
    foo.appendChild(s1);

    // 顯示 <div id="foo"><span id="s1">hello</span></div><div id="bar"><span id="s2">world</span></div>
    alert(document.getElementById('container').innerHTML);
</script>

ParentNode.insertBefore(newNode, referenceNode)

DOM 節點的 insertBefore 方法，用來將一個新的元素加到某個元素的前面。

<div id="foo"><span id="s1">hello</span><span id="s2">world</span></div>

<script>
    // 建立一個新的 <span>
    var newSpan = document.createElement('span');
    // 增添一些內容
    newSpan.innerHTML = 'new';

    // 取得目前頁面上的 foo 元素
    var foo = document.getElementById('foo');

    // 取得目前頁面上的 s2 元素
    var s2 = document.getElementById('s2');

    // 將新的 span 元素放到 foo 元素中的 s2 子元素前面
    foo.insertBefore(newSpan, s2);

    // 顯示 <span id="s1">hello</span><span>new</span><span id="s2">world</span>
    alert(foo.innerHTML);
</script>

insertBefore 也可以用來移動 DOM 元素的位置：

<div id="foo"><span id="s1">hello</span><span id="s2">world</span></div>

<script>
    // 取得目前頁面上的 foo 元素
    var foo = document.getElementById('foo');

    // 取得目前頁面上的 s1 元素
    var s1 = document.getElementById('s1');
    // 取得目前頁面上的 s2 元素
    var s2 = document.getElementById('s2');

    // 將 s2 元素放到 foo 元素中的 s1 子元素前面
    foo.insertBefore(s2, s1);

    // 顯示 <span id="s2">world</span><span id="s1">hello</span>
    alert(foo.innerHTML);
</script>

ParentNode.removeChild(child)

removeChild 方法用來移除 DOM 節點。

使用方法：

<div id="container"><div id="nested">12</div>34</div>

<script>
    // 取得目前頁面上的 container <div> 元素
    var container = document.getElementById('container');

    // 取得目前頁面上的 nested <div> 元素
    var nested = document.getElementById('nested');

    // 從頁面上移除 nested <div> 元素
    // removeChild 方法會返回被移除的元素
    var garbage = container.removeChild(nested);

    // 顯示 <div id="nested">12</div>
    alert(garbage.outerHTML);

    // 顯示 34
    alert(container.innerHTML);
</script>

ParentNode.replaceChild(newChild, oldChild)

replaceChild 方法用新節點來取代某個子節點，這個新節點可以是某個已存在的節點或是新節點。

範例：

<div><span id="childSpan">foo bar</span></div>

<script>
    // 建立一個新的 <span>
    var sp1 = document.createElement('span');
    // 增加些內容
    sp1.innerHTML = 'new replacement span element.';

    // 取得目前頁面上的 childSpan 元素
    var sp2 = document.getElementById('childSpan');

    // 取得 childSpan 的父親元素
    var parentDiv = sp2.parentNode;

    // 用 sp1 取代 sp2
    // replaceChild 方法會返回被取代的元素
    var replacedNode = parentDiv.replaceChild(sp1, sp2);

    // 顯示 <span id="childSpan">foo bar</span>
    alert(replacedNode.outerHTML);

    // 顯示 <span>new replacement span element.</span>
    alert(parentDiv.innerHTML);
</script>

Node.cloneNode(deep)

cloneNode 方法可以用來複製一個節點，cloneNode 預設不會複製節點的內容，你可以傳入參數 true 來複製節點的內容。

用法：

<div id="foo"><span>bar</span></div>

<script>
    // 取得目前頁面上的 foo 元素
    var foo = document.getElementById('foo');

    // 顯示 <div id="foo"></div>
    alert(foo.cloneNode(false).outerHTML);

    // 顯示 <div id="foo"><span>bar</span></div>
    alert(foo.cloneNode(true).outerHTML);
</script>

document.write(html)

document.write 可以用來在頁面載入的時候，將 HTML 內容寫入頁面中。

範例：

<html>
<head>
  <title>document.write example</title>
</head>
<body>
  <p>first paragraph</p>
  <script>
    document.write('<p>second paragraph</p>');
  </script>
</body>
</html>

待頁面載入後，整份文件的內容會像是這樣：

<html>
<head>
  <title>document.write example</title>
</head>
<body>
  <p>first paragraph</p>
  <script>
    document.write('<p>second paragraph</p>');
  </script>
  <p>second paragraph</p>
</body>
</html>

如果你在頁面載入後，才執行 document.write 則會將畫面的內容都清空後，才寫入新內容，現在實務上也比較少在使用 document.write。