一、创建元素节点
1.1 原生JS
创建元素节点
1.2 jQuery
创建元素节点
二、创建并添加文本节点
2.1 原生JS创建文本节点
- 通常创建文本节点和创建元素节点配合使用,比如:
2.2 jQuery
创建并添加文本节点:
三、复制节点
3.1 原生JS
复制节点:
true
和false
的区别:true
:克隆整个'<p>Hello World.</p>'
节点false
:只克隆'<p></p>'
,不克隆文本Hello World.'
3.2 jQuery
复制节点
- 注意:克隆节点要避免`ID重复
四、 插入节点
4.1 原生JS向子节点列表的末尾添加新的子节点
- 原生JS在节点的已有子节点之前插入一个新的子节点:
4.2 在jQuery中,插入节点的方法比原生JS多的多
- 在匹配元素子节点列表结尾添加内容
- 把匹配元素添加到目标元素子节点列表结尾
- 在匹配元素子节点列表开头添加内容
- 把匹配元素添加到目标元素子节点列表开头
- 在匹配元素之前添加目标内容
- 把匹配元素添加到目标元素之前
- 在匹配元素之后添加目标内容
- 把匹配元素添加到目标元素之后
五、删除节点
5.1 原生JS删除节点
5.2 jQuery删除节点
六、替换节点
6.1 原生JS替换节点
- 注意:
oldNode
必须是parentEl
真实存在的一个子节点