創(chuàng)建和插入元素
創(chuàng)建DOM元素
Document.createElement()
在一個HTML文檔中, Document.createElement()方法用于創(chuàng)建指定的HTML元素
當指定未定義的元素時， 創(chuàng)建一個HTMLUnknownElement
var div = document.createElement('div');
Node.appendChild()
將一個節(jié)點插入到指定的父節(jié)點的最末尾處(也就是成為了這個父節(jié)點的最后一個子節(jié)點).
語法
var child = node.appendChild(child);
- node 是要插入子節(jié)點的父節(jié)點.
- child 即是參數(shù)又是這個方法的返回值.
示例
// 創(chuàng)建一個新的段落p元素,然后添加到body的最尾部
var p = document.createElement("p");
document.body.appendChild(p);
例子：留言板插入內容
插入元素
Node.insertBefore()
在當前節(jié)點的某個子節(jié)點之前再插入一個子節(jié)點
語法
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
如果referenceElement為null則newElement將被插入到子節(jié)點的末尾。
如果newElement已經在DOM樹中，newElement首先會從DOM樹中移除
- insertedElement 是被插入的節(jié)點，即 newElement
- parentElement 是新插入節(jié)點的父節(jié)點
- newElement 是被插入的節(jié)點
- referenceElement 在插入newElement之前的那個節(jié)點
示例 1
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
<script>
var sp1 = document.createElement("span");
var sp2 = document.getElementById("childElement");
var parentDiv = sp2.parentNode;
// Insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);
</script>
沒有 insertAfter 方法?？梢允褂?insertBefore 方法和 nextSibling 來模擬它。
在前一個例子中，可使用下面代碼將 sp1 插入到 sp2 后面：
parentDiv.insertBefore(sp1, sp2.nextSibling);
如果 sp2 沒有下一個節(jié)點，則它肯定是最后一個節(jié)點，則 sp2.nextSibling 返回 null，且 sp1 被插入到子節(jié)點列表的最后面（即 sp2 后面）。
示例 2
在第一個子元素的前面插入一個元素，可使用 firstChild 屬性。
var parentElement = document.getElementById('parentElement');
var theFirstChild = parentElement.firstChild;
var newElement = document.createElement("div");
parentElement.insertBefore(newElement, theFirstChild);
當元素沒有首節(jié)點時，firstChild 返回 null。該元素仍然會被插入到父元素中，位于最后一個節(jié)點后面。又由于父元素沒有第一個子節(jié)點，也沒有最后一個子節(jié)點。 最終，新元素成為唯一的子元素。
例子：倒序留言板插入內容
刪除和替換元素
刪除DOM元素
Node.removeChild
語法
從某個父節(jié)點中移除指定的子節(jié)點,并返回那個子節(jié)點.
var oldChild = node.removeChild(child);
- child 是要移除的那個子節(jié)點.
- node 是child的父節(jié)點.
- oldChild 和child指向同一個節(jié)點,即oldChild === child.
被移除的這個子節(jié)點仍然存在于內存中,只是沒有添加到當前文檔的DOM樹中,因此,你還可以把這個節(jié)點重新添加回文檔中,當然,實現(xiàn)要用另外一個變量比如上例中的oldChild來保存這個節(jié)點的引用.
如果上例中的child節(jié)點不是node節(jié)點的子節(jié)點,則該方法會拋出異常.
示例
<!--示例HTML代碼-->
<div id="top" align="center">
<div id="nested"></div>
</div>
<script>
// 先定位父節(jié)點,然后刪除其子節(jié)點
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
// 無須定位父節(jié)點,通過parentNode屬性直接刪除自身
var node = document.getElementById("nested");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
// 移除一個元素節(jié)點的所有子節(jié)點
var element = document.getElementById("top");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
</script>
替換DOM元素
Node.replaceChild
用指定的節(jié)點替換當前節(jié)點的一個子節(jié)點，并返回被替換掉的節(jié)點。
語法
replacedNode = parentNode.replaceChild(newChild, oldChild);
- newChild 用來替換 oldChild 的新節(jié)點。如果該節(jié)點已經存在于DOM樹中，則它會被從原始位置刪除。
- oldChild 被替換掉的原始節(jié)點。
- replacedNode 和oldChild相等。
例子
// <div>
// <span id="childSpan">foo bar</span>
// </div>
// 創(chuàng)建一個空的span元素節(jié)點
// 沒有id,沒有任何屬性和內容
var sp1 = document.createElement("span");
// 添加一個id屬性,值為'newSpan'
sp1.setAttribute("id", "newSpan");
// 創(chuàng)建一個文本節(jié)點
var sp1_content = document.createTextNode("新的span元素的內容.");
// 將文本節(jié)點插入到span元素中
sp1.appendChild(sp1_content);
// 獲得被替換節(jié)點和其父節(jié)點的引用.
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;
// 用新的span元素sp1來替換掉sp2
parentDiv.replaceChild(sp1, sp2);
// 結果:
// <div>
// <span id="newSpan">新的span元素的內容.</span>
// </div>
其他
Node.hasChildNodes()
Node.hasChildNodes方法返回一個布爾值，表示當前節(jié)點是否有子節(jié)點。
var foo = document.getElementById("foo");
if (foo.hasChildNodes()) {
foo.removeChild(foo.childNodes[0]);
}
一個例子： 遍歷當前節(jié)點的所有后代節(jié)點
function DOMComb(parent, callback){
if( parent.hasChildNodes() ){
for(var node=parent.firstChild; node; node=node.nextSibling){
DOMComb(node, callback);
}
}
callback(parent);
}
Node.cloneNode()
Node.cloneNode方法用于克隆一個節(jié)點。它接受一個布爾值作為參數(shù)，表示是否同時克隆子節(jié)點，默認是false，即不克隆子節(jié)點。
var cloneUL = document.getElementsByTagName('ul')[0].cloneNode(true);
需要注意的是，克隆一個節(jié)點，會拷貝該節(jié)點的所有屬性，但是會喪失addEventListener方法和on-屬性（即node.onclick = fn），添加在這個節(jié)點上的事件回調函數(shù)。
克隆一個節(jié)點之后，DOM樹有可能出現(xiàn)兩個有相同ID屬性（即id="xxx"）的HTML元素，這時應該修改其中一個HTML元素的ID屬性。
Node.remove()
Element.remove方法用于將當前元素節(jié)點從DOM樹刪除。
var el = document.getElementById('div-01');
el.remove();
