js 动态创建标记

innerHTML：一旦使用了这个属性，它的全部内容都要被替换掉。且不会返回任何对刚插入的内容的引用

与document.write()方法一样，innerHTML属性也是HTML专有属性，不能用于任何其他标记语言文档。

createElement方法（创建元素节点）

语法：document.createElement(nodeName)

document.createElement("p")

appendChild方法（成为文档中某个现有节点的子节点）

语法：parent.appendChild(child)

document.getElementById("testdiv").appendChild(document.createElement("p"));//新创建的p元素成为testdiv元素的一个子节点

createTextNode方法（创建元素节点）

语法document.createTextNode(text)

document.createTextNode("hello world");

DOM提供insertBefore()方法，这个方法将把一个新元素插入到一个现有元素前面，在调用此方法时，必须有三个参数：

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

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

③父元素：目标元素的父元素（parentElement）

语法：parentElement.insertBefore(newElement,targetElement)

在DOM里，元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）

不必搞清楚父元素是哪个，因为targetElement元素的parentNode属性值就是它。

var gallery=document.getElementById("imagegallery");
gallery.parentNode.insertBefore('placeholder,gallery');//将placeholder元素插入到imagegallery的前面去。

在DOM中不提佛那个insertAfter()方法，可以自己创建一个

function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if (parent.lastChild==targetElement) {
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

 

使用insertAfter()方法

var gallery=document.getElementById("imagegallery");

把placeholder（这个变量对应着新创建出来的img元素）插入到gallery的后面：

insertAfter(placeholder,gallery);