一、创建节点
创建元素
- 使用如下方法可以创建一个新的元素节点:
- 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 增加、删除和替换节点(创建节点、插入节点、删除和替换节点)