JavaScript - DOM 克隆节点方法 - cloneNode

最新推荐文章于 2024-06-25 20:23:09 发布
最新推荐文章于 2024-06-25 20:23:09 发布
阅读量250 收藏 1
点赞数
文章标签： JavaScript DOM 克隆节点 深拷贝 浅拷贝
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46268961/article/details/125378904
版权

JavaScript - DOM 克隆节点方法 - cloneNode

具体看代码即可：(调用者为要克隆的节点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>永远的学生<b>！</b></p>

</div>

<script type="text/javascript">
    var div  = document.getElementsByTagName("div")[0];
    var div1 = div.cloneNode(true);     //是真时 那么我们复制他的节点和子节点到div1
    var div2 = div.cloneNode(false);     //是假时 那么我们只是复制他的节点到div1
    //测试：
    div.parentNode.appendChild(div1);   //把 <p>永远的学生<b>！</b></p> 这个都加进了啊 因为克隆时true
    div.parentNode.appendChild(div2);   //就加了个div啊！ 因为克隆时false

</script>
</body>
</html>
咸瑜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
教你javascript克隆dom结点,浅复制结点,深复制结点
04-09
教你javascript克隆dom,浅复制dom,深复制dom
DOM 节点的克隆和导入
编程三昧
02-19 1639
在使用 JS 操作 DOM 节点的时候，我们常常会用到克隆（或导入）节点的操作，那到底有哪些方法可以实现节点克隆（或导入）的效果呢？
Javascript：克隆一个DOM节点
最新发布
听海边涛声
06-25 244
Javascript：克隆一个DOM节点
js进行DOM深克隆（连同属性也一起克隆）
小明的博客
01-18 3612
最近在写一个组件，然后需要进行DOM对象的克隆引发的问题 首先js对dom的克隆在原生js API就一个方法 var origin = document.getEleme.getElementById("需要克隆的元素id"); //这个是进行浅克隆，就克隆当前标签，子标签这些都不克隆 var originNew = origin.cloneNode(); //这个时候我们需要加一个参数 进行深克隆 var originNew = origin.cloneNode(true); 问题： 克隆完成后发现，c
JavaScript 用cloneNode方法克隆节点的代码
10-27
很多时候我们需要通过HTML DOM 的方式，用JavaScript 动态生成很多相同的节点，包括其子节点
javascript dom操作之cloneNode文本节点克隆使用技巧
10-29
本克隆函数cloneNode他有两个参数——true or false
DOM节点深度克隆函数cloneNode()用法实例
09-03
`cloneNode()`函数是DOM节点对象的一个方法，它用于创建当前节点的一个副本。这个副本可以是浅复制或深复制，这取决于传递给`cloneNode()`函数的参数。如果参数为`true`，则执行深度复制，复制节点及其所有子节点；...
The-DOM:操作DOM
04-25
- `cloneNode`: 克隆节点，可以复制其属性和子节点。 ### 4. 属性操作 使用`getAttribute`和`setAttribute`来读取和设置元素的属性值。例如： ```javascript var element = document.getElementById('myElement');...
js DOM节点操作之创建、添加、删除和克隆节点
RayShyy的博客
03-21 4359
1. 创建节点 document.createElement(“tagName”)：tagName为HTML标签名，创建一个标签名为tagName的元素节点。 <body> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> </body> <script>
js dom 方法 js中cloneNode()的使用（复制元素）
龙卷风之家
01-08 7371
js dom 方法 js中cloneNode()的使用（复制元素）   document方法：   getElementById(id)  Node  返回指定结点的引用   getElementsByTagName(name)  NodeList  返回文档中所有匹配的元素的集合   createElement(name)  Node  Node   creat
DOM之元素的 创建+添加+删除+克隆
weixin_47075145的博客
07-18 2590
方式2利用innerHTML创建元素（不推荐用）innerHTML属性值不运行时，当作字符串，运行时当作js代码。
【js基础】日期对象的使用，查找、增加、克隆、删除DOM节点，M端事件
m0_62599305的博客
01-28 1143
在 JavaScript 中，日期对象的处理、DOM 节点的查找、增加、克隆和删除，以及移动端事件处理都是常见的任务。掌握这些基础操作对于开发者来说是至关重要的。本文将深入探讨这些主题，帮助你更好地理解和运用这些基础知识。本文深入介绍了 JavaScript 中日期对象的使用、DOM 节点的查找、增加、克隆和删除，以及移动端触摸事件的处理。这些基础知识是前端开发不可或缺的一部分，通过不断练习和实践，你将更加熟练地运用它们，为你的项目提供稳健的基础。希望这篇文章对你有所帮助！
js DOM节点的创建/插入/复制/删除/替换
蒲公英芽的博客
01-04 2169
创建DOM元素 document.createElement ( );所有的标签都可以使用这种方式来创建。 document.createDocumentFragment();创建一个碎片容器，主要用于直接给body放入多个。 document.createTextNode ( );创建文本节点。 img 和 canvas 元素可以使用 new 来创建，例如： var img = new Ima...
DOM克隆操作（深克隆/浅克隆）
weixin_30266829的博客
11-05 416
深克隆(克隆元素内文本节点加上所有后辈元素节点)， 浅克隆（克隆元素本身，不克隆文本节点和后辈节点）， 1. cloneNode()接受一个可选值为true或false的参数。True 表示克隆元素和它的所有子节点。False表示克隆元素但不包含它的子节点。通常，我们在实践中用true,我从来没有遇到过想要克隆一个节点但不包含它的子节点的情形。 2. cloneNode()不会克...
JS 使用cloneChild 克隆元素节点
热门推荐
又是再见?
06-21 1万+
<html test 克隆 橘子 草莓 哈密瓜 苹果 葡萄 猕猴桃 var btn4Obj = document.getElementById('btn4'); var ulObj = document.getElementsByClassName('ul'); var lis = document.getEl
JavaScript常用方法集合
日常笔记/总结/系列知识梳理
02-25 5929
JavaScript是一种广泛使用的编程语言，主要用于Web开发。它是一种脚本语言，这意味着它不需要像编译语言那样预先编译，而是在运行时解释和执行。JavaScript可以直接在浏览器中运行，这使得它在前端开发中特别重要，可以用于动态生成和更改网页内容、响应用户交互、发送和接收数据等。
JS DOM详解之节点的增加、删除、替换、复制，属性设置和获取，样式设置和获取
吉帅振博客
07-12 2983
写在前面：DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。所以说，有了DOM，在我看来就是相当于Java...
JavaScript DOM复制与克隆XML节点到新文件
在这个示例中，`DOMNodelist::item(int $index)` 方法用于访问`DOMNodeList`中的特定节点，`DOMNode::cloneNode([bool $deep])` 用于克隆选定的节点。如果`$deep`参数为真，那么节点的子节点也会被深拷贝。 代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值