元素內容

• innerHTML特性會回傳元素內容。
• outerHTML特性會回傳元素內容包含自己的tag。

<div id="fruits">
    <span>apple</span>
    <span>grape</span>
</div>

var fruits = document.getElementById('fruits');

fruits.innerHTML;  
// +---------------------+
// |    innerHTML        |
// +---------------------+
//     <span>apple</span>
//     <span>grape</span>

fruits.outerHTML;  
// +---------------------+
// |    outerHTML        |
// +---------------------+
//  <div id="fruits">
//      <span>apple</span>
//       <span>grape</span>
//  </div>

• 使用textContent()取出元素裡的純文字

var fruits = document.getElementById('fruits');

fruits.textContent; // 僅回覆裡面所有的文字   
// +---------------------+
// |    textContent      |
// +---------------------+
//       apple
//       grape

• 使用insertAdjacentHTML()可以指定插入元素的指定位置。
  element.insertAdjacentHTML(position, text);
  

創建、插入與刪除節點

• 創建節點

var head = document.getElementByTagName('head')[0];
var s = document.createElement('script');
s.src= url;
head.appendChild(s);


// create text 節點
var n = document.createTextNode('create text node');

• 插入節點
  node裡的appendChild()、insertBefore()插入document。

  • appendChild('...'): 插入在指定的子節點，成為該節點的lastChild。
  • insertBefore('...',pos): 插入在指定的子節點，第二引數可指定插入位置，若為null則插入最後(lastChild)。

• 移除/取代節點
  使用removeChild()移除節點，需要再父節點才可刪除子節點。
  n.parentNode.removeChild(n)
  replaceChild會移除子節點並用新節點取代。
  n.parentNode.replaceChild(document.createTextNode('TEST'),n)

• DocumentFragments
  可暫時作為其他節點的暫時容器，本身無父節點。速度會比直接操作DOM快。

fg = document.createDocumentFragment();

for(var x = 0; x < 10; x++) {
	var li = document.createElement("li");
	li.innerHTML = "List item " + x;
	fg.appendChild(li);
}

document.getElementbyId('ul-id').appendChild(fg);