.insertBefore() / .appendChild()——在父级的指定元素前面 / 末尾插入一个新元素

一、.insertBefore——在父级的指定元素前面插入一个新元素

写法：父级.insertBefore(新的元素，被插入的元素)

var oUl = document.getElementById('ul1');
var oLi = document.createElement('li');
oLi.innerHTML = oText.value;
oUl.insertBefore( oLi, oUl.children[0] );  //在oUl的第一个元素类型的子元素前面插入

描述：在指定元素前面插入一个新元素

注意：

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点

浏览器兼容性：

1、IE下：如果第二个参数的节点不存在，会报错
     其他标准浏览器下：如果第二个参数的节点不存在，则会以appendChild的形式进行添加

解决办法：

if ( oUl.children[0] ) {  //判断第一个子元素是否存在
    oUl.insertBefore( oLi, oUl.children[0] );   //存在则在第一个子元素前添加
} else { 
    oUl.appendChild( oLi );  //不存在就用appendChild添加子元素
}

 

二、.appendChild——在指定元素末尾添加子元素

写法：父级.appendChild(要添加的元素)

var oUl = document.getElementById('ul1');
var oLi = document.createElement('li');
oLi.innerHTML = "111";
oUl.appendChild( oLi );

描述：在父级元素的末尾添加一个子元素

注意：

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点