DOM操作指南-优快云博客

1.创建节点

createElement(): 创建新的Element节点

var s = document.createElement('script');

createTextNode(): 创建Text节点

cloneNode(): 复制节点，给方法传递参数true能够递归地复制所有的后代节点，false只是执行一个潜复制

importNode(): 除了IE的其他浏览器。如果给它传递另一个文档的一个节点，它将返回一个适合本文档插入的节点的副本。传递true作为第二个参数，该方法将诋毁地导入所有的后代节点

2.插入节点

appendChild(): 在需要插入的Element节点上调用的，它插入指定的节点使其成为那个节点的最后一个子节点

insertBefore():接受两个参数。第一个参数就是待插入的节点，第二个参数是已存在的节点，新节点将插入该节点的前面。该方法应该是在新节点的父节点上调用，方法的第二个参数必须是该父节点的子节点。

//将child节点插入到parent中，使其成为第n个子节点
function insertAt(parent,child,n){
   if(n<0 || n>parent.childNodes.length) throw new Error("");
   else if(n==parent.childNodes.length) parent.appendChild(child);
   else parent.insertBefore(child,parent.childNodes[n]);
}

3.删除和替换节点

removeChild(): 删除节点，注意该方法不是在待删除的节点上调用，而是在其父节点上调用

n.parentNode.removeChild(n);

replaceChild():替换节点,第一个参数为新节点，第二个参数是需要代替的节点

n.parentNode.replaceChild(document.createTextNode("replace"),n);

转载于:https://www.cnblogs.com/showtime813/p/4481249.html

DOM操作二