【js学习笔记-086】-----创建、插入、删除节点

【js学习笔记-----创建、插入、删除节点】

创建节点

创建新的Element节点可以使用Document对象的createElement()方法。给方法传递元素的标签名。注意html不区分大小写，xml区分大小写。

 

Text节点类似的方法创建：

var newnode=document.createTextNode(“textnode content”);

 

不常用的createComment() / createDocumentFragment()方法。

 

另一种创建文档节点的方法是复制已存在的节点。每个节点有一个cloneNode()方法来返回该节点的一个全新副本。给方法传递参数true能够递归复制所有的后代节点，或传递参数false只是执行一个浅复制。Document对象还定义了一个类似的方法叫importNode()。它将返回一个适合本文档插入的节点的副本，传递第二个参数，该方法将递归地导入所有的后代节点。

 

插入节点

一旦有新节点，可以使用Node的appendChild()或insertBefore将它插入到文档中。

 

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

 

insertBefore 接受两个参数。第一个参数是待插入的节点，第二个参数是已存在的节点，新节点将插入到该节点前面。该方法应该是在新节点的父节点上调用，方法的第二个参数必须是父节点的子节点。如果第二个参数是空则将节点插入在最后。注意:如果调用appendChild()或insertBefore()将已存在文档中的一个节点再次插入，那个节点将自动从它当前的位置删除并在新的位置重新插入：没有必要显式删除该节点。

 删除和替换节点

removeChild()方法是从文档树中删除一个节点。但是请小心：该方法不是在待删除的节点上调用，而是在其父节点上调用。在父节点上调用该方法，并将需要删除的子节点作为方法参数传递给它。在文档中删除n节点，代码可这样写

n.parentNode.removeChild(n);

replaceChild()方法删除一个子节点并用一个新的节点取而代之。在父节点上调用该方法，第一个参数是新节点，第二个参数是需要代替的节点。如用一个文本字符串来替换节点n

n.parentNode.replaceChild(document.createTextNode(“[REDACTED]”),n);