添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中
appendChild用法
target.appendChild(newChild) //newChild作为target的子节点插入最后的一子节点之后appendChild例子
var newElement = document.Document.createElement('label'); newElement.Element.setAttribute('value', 'Username:'); var usernameText = document.Document.getElementById('username'); usernameText.appendChild(newElement);insertBefore定义
在现有的子节点前插入一个新的子节点
insertBefore用法
target.insertBefore(newChild,existingChild) //newChild作为target的子节点插入到existingChild节点之前 //existingChild为可选项参数,当为null时其效果与appendChild一样insertBefore例子
var oTest = document.getElementById("test"); var newNode = document.createElement("p"); newNode.innerHTML = "This is a test"; oTest.insertBefore(newNode,oTest.childNodes[0]);扩展:
有insertBefore,但是没有insertAfter,下面自己写一个:
function insertAfter(newEl, targetEl){ var parentEl = targetEl.parentNode; if(parentEl.lastChild == targetEl){ parentEl.appendChild(newEl); }else{ parentEl.insertBefore(newEl,targetEl.nextSibling); } }insertAfter用法与例子
var txtName = document.getElementById("txtName"); var htmlSpan = document.createElement("span"); htmlSpan.innerHTML = "This is a test"; insertAfter(htmlSpan,txtName);将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后
总结:
1、appendChild和insertBefore是做对节点的方法来使用的,而insertAfter只是自定义的一个函数
2、insertBefore相对于appendChild来说,比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。
3、使用appendChild和insertBefore来插入新的节点前提是,其兄弟节点必须有共同的父节点。