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。