insertBefore()

Posted 2020-08-16 青竹zzq

insertBefore()方法将把一个给定的节点插入到一个给定元素节点的给定子节点前面，他返回一个指向新增子节点的引用指针：

reference = element.insertBefore(newNode,targetNode);

如上所示，节点newNode将被插入元素节点element并出现在节点targetNode的前面。节点targetNode必须是element元素的一个子节点。如果targetNode节点未给出，newNode节点就将被追加为element元素最后一个子节点-----从效果看，这相当于调用appendChild()的方法。

insertBefore()方法通常与createElement()和createTargetNode()方法配合使用，以便把新创建的节点插入到文档树里。

在下例中，某文档有个id属性值是content的元素，这个元素又包含着一个id属性值是fineprint，我们将用createElement()方法创建一个新的文本段元素，再把新建元素插入到content元素所包括的fineprint元素的前面：

var container = document.getElement.ById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

如果被插入的元素本身还有子节点，那些子节点也被插入到目标节点里面：

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
var text = document.createTextNode("Here cones the fineprint");
para.appendChild(text);
container.insertBefore(para,message);

insertBefore()方法不仅可以用来插入新创建元素，还可以用来挪动文档中的现有节点。

在下例中，某个文档有一个id属相值是content的元素，在这个元素有包含一个id属性值是fineprint的元素，在这个文档的其他地方还有一个id属性值是headline的元素。在找这个元素后，最后一条语句把headline元素移动到content的元素所包含的fineprint元素的前面：

var container = document.getElementById("content");
var messge = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
container.insertBefore(announcement,message);

注意，id属性值是headline的元素将先从文档书上面被移除，然后再被重新插入到新的位置，即content元素所包含的fineprint元素前面。