JavaScript之DOM-5 增加删除和替换节点(创建节点插入节点删除和替换节点)

Posted 2020-07-02

一、创建节点

创建元素

  - 使用如下方法可以创建一个新的元素节点:

      - document.createElement(‘元素名‘);

创建文本节点

  - 使用如下方法可以创建一个新的元素节点:

      - document.createTextNode(‘text‘);

创建注释

  - 使用如下方法可以创建一个html注释节点:

      - document.createComment(‘comment‘);

创建文档片段

  - 使用如下方法可以创建一个文档片段:

      - document.createDocumentFragment();

二、插入节点

appendChild

  - parentNode.appendChild(childNode) 可用于将为一个父元素追加最后一个子节点

insertBefore

  - parentNode.insertBefore(newChild,existingChild)方法用于在父元素中的指定节点之间添加一个新的子节点(也可以用于移动子节点)

三、删除和替换节点

删除节点

  - 可以使用如下方法删除一个子节点:

      - parentNode.removeChild(childNode);   //子节点被删除前应解除所有绑定的事件，否则无法回收事件绑定所占用的内存

      - 此方法返回被删除的节点的引用

替换节点

  - 可以使用如下方法替换一个已经存在的子节点:

      - parentNode.replaceChild(newNode,oldNode)

删除属性

  - 删除元素的属性可以使用如下两种方法:

      - element.removeAttribute(‘attrName‘);

      - element.removeAttributeNode(‘attrNode‘);   //返回删除的属性节点

总结：本章内容主要介绍了  javascript DOM 增加、删除和替换节点(创建节点、插入节点、删除和替换节点)

本文出自 “技术交流” 博客，谢绝转载！