复制节点和替换节点

最新推荐文章于 2024-06-09 00:30:00 发布

回家打Boss

最新推荐文章于 2024-06-09 00:30:00 发布

阅读量505

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44545712/article/details/95042245

版权

本文介绍了如何在DOM中复制和替换节点。利用`clone()`方法可以复制节点，`clone(true)`能同时复制元素及事件。需要注意的是，复制后的节点ID必须唯一，否则会导致错误。另外，`replaceWith()`和`replaceAll()`用于替换节点，原节点上的事件在替换后会消失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                                 复制节点和替换节点
 -----------------------------------------------------------------------------------
      开发工具与关键技术:VS.JQuery作者：纳兹,撰写日期：2019.07.08,源于:老师教程
 -----------------------------------------------------------------------------------

复制节点：clone（）：克隆匹配的DOM元素，返回值为克隆后的副本，但此时复制的新节点不具有任何行为。clone（true）：复制元素的同时也复制元素中的事件。例如：下图。
复制热血（#get）节点，并添加到蔬菜（#poto）的节点的后面（ $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲get").clone().i\dots$ ("#poto"))）, 当点击复制的节点它也会弹出显示，原来的（被复制的节点）点击也会有反应，在浏览器检查代码，代码下面多了一条被复制的节点，这个节点代码和被复制的节点代码一样，所以需要重置一下（ $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲get").clone(tru\dots$ ("#poto"));），使用attr重置代码,复制前我们首先是克隆，所以.clone()得在.attr前面，克隆之后.clone()不具任何行为，如果需要具有行为需要在.clone()里面加true，在克隆的同时克隆节点所具备的事件。复制clone节点时需要注意原节点的属性id，因为在同一个1文档id不能相同，所以原节点和克隆的节点不能出现相同的节点id，否则就是错误的节点。复制.clone(true):在复制节点的同时也要复制节点包含的事件。
替换节点（replaceWidth():将所有匹配的元素都替换为指定的HTML或DOM元素；replaceAll()：颠倒了的replace()方法；如果在替换之前，已经在元素上绑定了事件。替换后原先绑定的事件会与原先的元素一起消失。
创建一个节点

艾斯
,替换id(#food)的第一个节点 $(" < l i > 艾斯 < / l i > ") . r e p l a c e A l l ($ ("#city li:first"))；创建一个节点
艾斯
,替换#Catton的第二个li子节点( $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲city li:eq(1").\dots$ (“
艾斯
”)))；互换两个节点：#get和#poto( $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲poto").replaceW\dots$ ("#get")))，这里不仅替换了还移动了。如果需要更换可以使用复制节点的方法（var $poto2 = $("#get").clone(true)， var $get = $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲get").replaceWi\dots$ poto2)，alert(2)， $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲poto").replaceW\dots$ ("#get"))。节点互换前需要复制节点。
以上为节点的复制和替换。