DOM移除、替代、拷贝、遍历

简介: DOM移除、替代、拷贝、遍历

1.empty()


方法描述:删除所有匹配元素的子元素。

需求描述:将ul列表下所有的子节点全部移除

方法描述:删除所有匹配元素的子元素。

需求描述:将ul列表下所有的子节点全部移除

<ul>
    <li>列表项1</li>
    <p>我是段落1</p>
    <li>列表项2</li>
    <p>我是段落2</p>
    <li>列表项3</li>
</ul>
$('ul').empty();


2.方法描述:删除所有匹配的元素。


注意:同时移除元素上的事件及 jQuery 数据

$('ul>li').replaceWith('

我是段落

');


3.replaceWith()


方法介绍:用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

需求描述:将ul下的所有li替换为p标签

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
$('ul>li').replaceWith('<p>我是段落</p>');


4.replaceAll()


方法介绍:.replaceAll()和.replaceWith()功能类似,但是目标和源相反。

需求描述:将ul下的所有li替换为p标签





5.clone()


方法描述:创建一个匹配的元素集合的深度拷贝副本。如果传入一个true,则表示是否会复制元素上的事件处理函数,从jQuery 1.4开始,元素数据也会被复制。

需求描述:为ul列表创建一个深克隆并追加到body后


<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>


var ul = $('#ul').clone();
$('body').append(ul);




相关文章
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
2月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
2月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
30天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
2月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树