1: 節點的創建
新建一個新節點的方式主要有三種：
1: createElement()

document.createElement(tagName); //返回一個HTMLElement類型的節點，參數為字符串類型的標簽名字var p = document.createElement('p'); //<p></p>

2: createTextNode()

document.createTextNode(text);//返回一個Text類型的節點，參數為這個節點里的內容，字符串var text = document.createTextNode('text node content'); //"text node content"

3: cloneNode()

targetElement.cloneNode(deepClone);//它接受一個參數，如果為true,就返回對targetElement的深拷貝，也就是返回targetElement包含它的后代子節點；如果為false，就只返回targetElement本身，不包含任何的子節點

比如，我們有一段HTML：

<ul class='bookList'><li class='bookItem'>book 1</li><li class='bookItem'>book 2</li> </ul>

我們對'<ul>'元素分別進行深拷貝和淺拷貝：

4: importNode()

document.importNode(externalNode, deep);externalNode: 來自別的document的node, 比方說一個iframe的node deep: 是否深拷貝，默認值為false. 在DOM4的時候，在deep缺省的情況下，它的默認值是true，但是后來又變為false。所以為了向前向后兼容，deep永遠給一個值，不要缺省。

來看一個在本文檔嵌入一個來自iframe中的節點的例子：

var iframe = document.getElementsByTagName("iframe")[0]; var oldNode = iframe.contentWindow.document.getElementById("myNode"); var newNode = document.importNode(oldNode, true); document.getElementById("container").appendChild(newNode);

2: 節點的插入
1: appendChild()

parentNode.appendChild(childNode)

在父節點上調用appendChild（）方法，參數是想要插入的子節點，執行的結果是，這個子節點會被成為父節點的最后一個子節點。
假如我們之前有一段HTMl:

<ul class='bookList'><li class='bookItem'>book 1</li><li class='bookItem'>book 2</li> </ul>

我們現在先新建一個'<li>'元素，然后把它添加到'<ul>'里面：

var lastBook = document.createElement('li'); lastBook.textContent = 'last book'; var bookList = document.getElementsByClassName('bookList')[0]; bookList.appendChild(lastBook);

再執行完上面的代碼之后，之前的HTML就會變成：

<ul class="bookList"><li class="bookItem">book 1</li><li class="bookItem">book 2</li><li>last book</li> </ul>

2: insertBefore()

var insertedNode = parentNode.insertBefore(newNode, referenceNode);newNode: 想要插入的節點 referenceNode: 新的節點插入到referenceNode節點之前。必須傳入一個node或者null，不能省略。

還是上面的一段HTML:

<ul class='bookList'><li class='bookItem'>book 1</li><li class='bookItem'>book 2</li> </ul>

我們嘗試在最后一個'<li>'前面插入一個新的'<li>':

var bookList = document.getElementsByClassName('bookList')[0]; var lastLi = bookList.lastElementChild; var newLi = document.createElement('li'); newLi.textContent = 'new book'; bookList.insertBefore(newLi, lastLi);

執行完上面的代碼之后，原來的'<li>'就變為：

<ul class="bookList"><li class="bookItem">book 1</li><li>new book</li><li class="bookItem">book 2</li> </ul>

3: insertAdjacentHTML()

element.insertAdjacentHTML(position, HTMLText);//參數為一段HTML文本 element.insertAdjacentElement(position, Element);//參數為一個Element element.insertAdjacentText(position, text); //插入一段純文本

以上的三個方法，都是根據position的值，在特定的位置插入一個節點，只是參數的類型不一樣。position的值有四個：

1: ‘beforeBegin’ 2: 'afterBegin' 3: 'beforeEnd' 4: 'afterEnd'

以上四個值，駝峰和全小寫都可以。

1: 先來就以上三個不同的方法的使用和效果做一個對比：
還是先準備一段HTML:

<ul class='bookList'><li class='bookItem'>book 1</li><li class='bookItem'>book 2</li> </ul>

1: element.insertAdjacentHTML(position, HTMLText);

var bookList = document.getElementsByClassName('bookList')[0]; bookList.insertAdjacentHTML('afterBegin','<p> new node</p>');

執行完之后，原來的HTML變成這樣：

2: element.insertAdjacentElement(position, Element);
還是之前的那段HTML,然后我們執行：

var bookList = document.getElementsByClassName('bookList')[0]; var newLi = document.createElement('li'); newLi.textContent = 'new node'; bookList.insertAdjacentElement('afterBegin', newLi)

執行完之后，效果變這樣：

3: element.insertAdjacentText(position, text)
還是之前的那段HTML, 然后我們執行：

var bookList = document.getElementsByClassName('bookList')[0]; bookList.insertAdjacentText('afterBegin', 'text content')

執行之后，會在'<ul>'的最開頭添加一段純文本。

3: 節點的替換

oldNode.parentNode.replaceChild(newNode, oldNode);

還是之前的那段HTML:

<ul class='bookList'><li class='bookItem'>book 1</li><li class='bookItem'>book 2</li> </ul>

我們嘗試把第一個'<li>'元素換掉：

var bookList = document.getElementsByClassName('bookList')[0]; var oldLi = bookList.firstElementChild; var newLi = document.createElement('li'); newLi.textContent = 'new node'; bookList.replaceChild(newLi, oldLi);

執行完上面的代碼之后呢，之前的HTML就變成了這樣：

<ul class="bookList"><li>new node</li><li class="bookItem">book 2</li> </ul>

4: 節點的刪除

targetNode.parentNode.removeChild(targetNode);

依然是在目標元素的父節點上調用這個方法，把目標元素作為參數傳進去。
還是我們之前的那段HTML:

<ul class='bookList'><li class='bookItem'>book 1</li><li class='bookItem'>book 2</li></ul>

我們嘗試著把第一個'<li>'刪掉：

var bookList = document.getElementsByClassName('bookList')[0]; bookList.removeChild(bookList.firstElementChild);

這之后，就只剩下一個'<li>'元素了：

<ul class="bookList"><li class="bookItem">book 2</li> </ul>

removeChild()會對父節點的childNodes產生影響，刪掉了一個節點，它后面的節點會在childNodes里依次往前移動。

總結

以上是生活随笔為你收集整理的JavaScript DOM 6 - 节点的创建，插入，替换，删除的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。