-
appendChild
將元素添加到指定的節(jié)點(diǎn)中蝠检，使用如下：方法：target.appendChild(newChild) newChild作為target的子節(jié)點(diǎn)插入最后的一子節(jié)點(diǎn)之后 //舉例 var newElement = document.Document.createElement('label'); newElement.Element.setAttribute('value', 'Username:'); var usernameText = document.Document.getElementById('username'); usernameText.appendChild(newElement); -
insertBefore:在現(xiàn)有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)辣苏，使用如下：
方法：target.insertBefore(newChild,existingChild) newChild作為target的子節(jié)點(diǎn)插入到existingChild節(jié)點(diǎn)之前 existingChild為可選項(xiàng)參數(shù)及穗，當(dāng)為null時(shí)其效果與appendChild一樣 //舉例 var oTest = document.getElementById("test"); var newNode = document.createElement("p"); newNode.innerHTML = "This is a test"; oTest.insertBefore(newNode,oTest.childNodes[0]); -
沒有insertAfter摧茴，那就自己造一個(gè)嘍
function insertAfter(newEl, targetEl) { var parentEl = targetEl.parentNode; if (parentEl.lastChild == targetEl) { parentEl.appendChild(newEl); } else { parentEl.insertBefore(newEl, targetEl.nextSibling); } }使用：
var txtName = document.getElementById("txtName"); var htmlSpan = document.createElement("span"); htmlSpan.innerHTML = "This is a test"; insertAfter(htmlSpan,txtName); //將htmlSpan 作為txtName 的兄弟節(jié)點(diǎn)插入到txtName 節(jié)點(diǎn)之后
總結(jié)：
1、appendChild和insertBefore是做對(duì)節(jié)點(diǎn)的方法來使用的埂陆，而insertAfter只是自定義的一個(gè)函數(shù)
2苛白、insertBefore相對(duì)于appendChild來說，比較靈活可以將新的節(jié)點(diǎn)插入到目標(biāo)節(jié)點(diǎn)子節(jié)點(diǎn)數(shù)組中的任一位置焚虱。
3购裙、使用appendChild和insertBefore來插入新的節(jié)點(diǎn)前提是，其兄弟節(jié)點(diǎn)必須有共同的父節(jié)點(diǎn)
