JavaScript在DOM中插入一个新元素

在已有元素前面插入一个新元素

DOM提供了名为insertBefore（）这个方法，这个方法将把一个新元素插入到一个现有元素的前面。在调用次方法时，你必须告诉它三件事。

（1）    新元素： 你想插入的新元素（newElement）。

（2）    目标元素： 你想把这个新元素插到哪个元素（targetElement）之前。

（3）    父元素： 目标元素的父元素（parentElement）。

下面是这个方法的掉用语法：

parentElement.insertBefore(newElement,targetElement);

我们不必搞清楚父元素到底是哪个， 因为targetElement元素的parentNode属性值就是它。在DOM里，元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）。

  比如说，下面的这条语句可以把placeholder和description元素插入到前面的id为imagegallery中：

           var gallery =document.getElementById(“imagegallery”);

           gallery.parentNode.insertBefore(placeholder,gallery);

此时，变量gallery的parentNode属性值是body元素，所以placeholder元素将别插入为body元素的新子元素，他被插入到它的兄弟元素gallery的前面。

还可以把description元素也插入到gallery元素之前，成为它的一个兄弟元素：

           Var gallery =parentNode.insertBefore(description, gallery);

 

在现有方法后面插入一个新元素

DOM中提供了insertBefore方法，但是没有insertAfter方法我们可以使用现有方法自己编写一个insertAfter方法：

      function insertAfter(newElement,targetElement){

           var parent =targetElement.parentNode;

           if(parent.lastChild == targetElement){

           parent.appendChild(newElement);

}else{

Parent.insertBefore(newElement,targetElement.nextSibling)

}

}

 

下面来分析一下这个函数：

（1）    首先， 这个函数有两个参数， 一个是被插入的新元素，另一个是目标元素。 这两个参数通过变量newELement和targetElement被传递到这个函数：

function insertAfter(newElement,targetELement)

（2）    把目标元素的parentNode属性保存到变量parent中：

var parent = targetElemnet.parentNode

（3）    接下来，检查目标元素是不是parent的最后一个子元素，即比较parent元素的lastChild属性值与目标元素是否存在“等于“关系：

if (parent.lastChild == targetElement)

（4）    如果是，就用appendChild方法把新元素追加到parent元素上，这样新元素恰好被插入到目标元素之后：

parent.appendChild(newElement)

（5）    如果不是， 就把新元素插入到目标元素和目标元素的下一个元素中间。目标元素下一个兄弟元素即目标元素的nextSibling属性。用insertBerfore方法把新元素插入到目标元素的下一个兄弟元素之间：

parent.insertBefore(newElement,targetElement.nextSibling)