文章寫到第 25 篇，從這樣的過程也穩固了自己不少觀念，今天依然攪進腦汁將查找的資料盡量用自己的話寫出來，也為今天的自己加油吧。

DOM 節點新增

• document.createElement() / 可依指定的標籤名稱 ( tagName ) 建立一個新的 HTML 元素。

  var newDiv = document.createElement('div');
  

  自己測試的時候會發現，這個時候雖然有寫入 createElement()，但是在瀏覽器上還看不到他，因此要能看見他的運作，我們還需要透過 appendChild()、insertBefore() 或 replaceChild()，才能將新元素加入指定位置，並在瀏覽器上呈現，不過這裡我們可以了解到在範例上他是這麼寫的：

  <ul id="textList">
  	<li>text 1</li>
  	<li>text 2</li>
  	<li>text 3</li>
  </ul>
  
  <script>
  	var textList = document.getElementById('textList');
  	var newTextList = document.createElement('li');
  </script>
  

  底下這個範例是創建一個按鈕，在實例上我們也可以這麼寫，

  var btn = document.createElement("BUTTON");
  var t = document.createTextNode("CLICK ME");
  btn.appendChild(t);
  

  我們也可以針對createElement()新創的元素指定一個屬性：

  textList.id = "seeTheNewList";
  textList.className = "isText";
  

• document.createTextNode() / 文字也屬於一個文字節點，document.createTextNode() 方法為創建一個新的文字節點，使用方法直接在 document.createTextNode() 加入文字即可。

  var text = document.createTextNode(data);
  

  我們使用上面的範例接著看，經過測試會發現 document.createTextNode() 新增的文字仍然沒有出現，因此在被加入某個節點之前，他不會在瀏覽器上呈現：

  <ul id="textList">
  	<li>text 1</li>
  	<li>text 2</li>
  	<li>text 3</li>
  </ul>
  
  <script>
  	var textList = document.getElementById('textList');
  	var newTextList = document.createElement('li');
  	var textNode = document.createTextNode("Hi,I'm here");
  </script>
  

再舉一個 document.createTextNode() 的例子：

var h = document.createElement("H1")
var t = document.createTextNode("Hello");
h.appendChild(t);

上面這個範例是一個修改標題的動作，在修改標題之前我們需要有一個 h1，所以 document.createElement() 創建了一個 h1，再使用 document.createTextNode() 方法更改了標題。

• document.createDocumentFragment() / 這是一個可以大幅增進 web page 效能物件，使用以下大神範例進行實測，假如我們要在 body 裡插入數個 element：

  // 這是原本的寫法
  for( var i=0; i<100; i++ ) {
  	var item = document.createElement('div');
  	$(item).text('Element-'+i);
  	$(item).css({
  		background: 'gold',
  		padding: 5,
  		margin: 5,
  		float: 'left'
  	});
  	$('body').append(item);
  }
  

  使用 document.createDocumentFragment() 的寫法經過實測，速度確實快了很多，這是因為 DocumentFragment 是一個頁面上「不存在」的 element 物件，所以不論我們對他做什麼樣的操作，都不會影響使用者外觀。

  // 這是使用 document.createDocumentFragment() 的寫法
  var fragment = document.createDocumentFragment();
  for( var i=0; i<100; i++ ) {
  	var item = document.createElement('div');
  	$(item).text('Element-'+i);
  	$(item).css({
  		background: 'gold',
  		padding: 5,
  		margin: 5,
  		float: 'left'
  	});
  	fragment.appendChild(item);
  }
  $('body').append(fragment);
  

第一段寫法會要瀏覽器做100次更新頁面的動作，而第二段只會讓瀏覽器更新一次頁面，因此速度會快很多。

• document.write() / write() 方法可以向文檔寫入 HTML、表達式或 JavaScript 代碼，當解析到 document.write() 的時候就會停下來並將內容輸出。

  document.write("<h1>Hi,I'm here</h1>");
  

  另外，也可以新增一個 script 標籤：

  document.write("<script type=\"text\javascript\" src=\"file.js\">" + "<\/script>");
  

DOM 節點修改與刪除

• NODE.appendChild() / 這個方法可以向節點的子節點列表的末尾，添加新的子節點。這裡一樣使用上面的範例：

  <ul id="textList">
  	<li>text 1</li>
  	<li>text 2</li>
  	<li>text 3</li>
  </ul>
  
  <script>
  	// 取得容器
  	var textList = document.getElementById('textList');
  
  	// 建立新的 li 元素
  	var newTextList = document.createElement('li');
  
  	// 建立 textNode 文字節點
  	var textNode = document.createTextNode("Hi,I'm here");
  
  	// 透過 appendChild 將 textNode 加入至 newTextList
  	newTextList.appendChild(textNode);
  
  	// 透過 appendChild 將 newTextList 加入至 textList
  	textList.appendChild(newTextList);
  </script>
  

  這個範例最後會在瀏覽器呈現這個狀態：

  ．text 1
  ．text 2
  ．text 3
  ．Hi,I'm here
  

  另外，我們可以回顧一下上面使用 document.createElement()以及 document.createTextNode() 方法的時候，瀏覽器都沒有呈現畫面，因此這裡可以驗證，我們必須將元素加入正確的節點位置他才會在瀏覽器上顯示。

• NODE.insertBefore() / 在已有 ( 指定 ) 的子節點前插入一個新的子節點。

  document.getElementById("myList").appendChild(newListItem);
  

  舉例來說 NODE.insertBefore()添加前，這是一個一般的 list：

  ．text 1
  ．text A
  ．text 3
  

  假如我們希望指定 text A 前面添加一段文字，則添加了以後：

  ．text 1
  ．我們在這裡添加了一段文字
  ．text A
  ．text 3
  

  一樣拿上面的範例來實測：

  <ul id="textList">
  	<li>text 1</li>
  	<li>text 2</li>
  	<li>text 3</li>
  </ul>
  
  <script>
  	// 取得容器
  	var textList = document.getElementById('textList');
  
  	// 取得 <li>text 2</li> 的元素
  	var newText2 = document.querySelectorAll('li')[1];
  
  	// 建立新的 li 元素
  	var newTextList = document.createElement('li');
  
  	// 建立 textNode 文字節點
  	var textNode = document.createTextNode("Hi,I'm here");
  	newTextList.appendChild(textNode);
  
  	// 將新節點 newTextList 插入 newText2 前方
  	textList.insertBefore(newTextList, newText2);
  </script>
  

上面的範例最後呈現這樣：

．text 1
．Hi,I'm here
．text 2
．text 3

• NODE.replaceChild() / replaceChild()方法可以將某個指定的子節點 ( newnode ) 替換為另一個 ( oldnode )；節點可以是新創建的，也可以是已存在的。

  document.getElementById("myList").replaceChild(newnode,oldnode);
  

  再次使用樓上的範例，在這裡我發現一篇文章只要能有一個範例，就能不斷重複使用，真的好方便^_^

  <ul id="textList">
  	<li>text 1</li>
  	<li>text 2</li>
  	<li>text 3</li>
  </ul>
  
  <script>
  	// 取得容器
  	var textList = document.getElementById('textList');
  
  	// 取得 <li>text 2</li> 的元素
  	var oldNode = document.querySelectorAll('li')[1];
  
  	// 建立新的 li 元素
  	var newTextList = document.createElement('li');
  
  	// 建立 textNode 文字節點
  	var textNode = document.createTextNode("Hi,I'm here");
  	newTextList.appendChild(textNode);
  
  	// 將新節點 newTextList 插入 newText2 前方
  	textList.replaceChild(newTextList, oldNode);
  </script>
  

畫面上則會是這個樣子：

．text 1
．Hi,I'm here
．text 3

• NODE.removeChild() / removeChild()方法，以字面上來看也可以很明顯的知道，他的用途就是刪除指定的子節點，如果失敗會回傳 null。

  elementNode.removeChild(node)
  

  <ul id="textList">
  	<li>text 1</li>
  	<li>text 2</li>
  	<li>text 3</li>
  </ul>
  
  <script>
  	// 取得容器
  	var textList = document.getElementById('textList');
  
  	// 取得 <li>text 2</li> 的元素
  	var remove = document.querySelectorAll('li')[1];
  
  	// 將 textList 下的 remove 節點移除
  	textList.removeChild(remove);
  </script>
  

  畫面：

  ．text 1
  ．text 3
  

參考資料：

重新認識 JavaScript: Day 13 DOM Node 的建立、刪除與修改
runoob