js实现克隆节点

最新推荐文章于 2024-08-15 10:20:11 发布
最新推荐文章于 2024-08-15 10:20:11 发布
阅读量4.1k 收藏 1
点赞数 1
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lihuozhiling0101/article/details/25831825
版权

直接上代码

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>HTML DOM</title>
        <script type=text/javascript>
        function add()
        {
//alert("0");
        var parent=document.getElementById("parent");//id 取得 的是 对象
var son=document.getElementsByClassName("son");//class 取得的是 数组
        parent.appendChild(son[0].cloneNode(true));
        }
        </script>
</head>
<body>
<div id="parent">
<p class="son">hello world!<b>hahaha</b></p>
</div>
        <a href="javascript:void(0)" onClick="add()">add</a>
</body>
</html>

cloneBode若为false不克隆任何子节点，包括自身的文本

若为true克隆所有子节点

Werty01
关注
专栏目录
节点克隆
Dragon.G
08-08 2560
对于克隆节点最长用的方法有两种，一、原生JavaScript。 二、使用流行类库。这篇文章里我会说下使用原生Javascript方法和jQuery方法克隆节点。以及，两者的异同点。好了，废话也不多说了，进入主题。。在说两种实现克隆节点之前，再啰嗦几句基础的概念：影子克隆和深度克隆var el = document.querySelector('.come-class');// 影子克隆: 只克隆节点
JS 克隆节点
weixin_45974687的博客
03-15 1361
克隆节点 元素.cloneNode(参数) 参数 : 布尔类型 true false(默认) //body部分 <div id="box"> 我是外面的大盒子 <h1>我是标题</h1> </div> //js部分 //获取元素 var box = document.getElementByI...
JS（十）——clone()
最新发布
初叙
08-15 263
深拷贝
js结点的克隆
weixin_46806066的博客
08-12 1953
克隆标签尽量不涉及id值，用类 想得到一个和目标标签一样的 被克隆的对象.cloneNode( true)表示克隆对象样式及里面的内容 克隆的时候想要克隆事件的话就把事件封装在div里面 1、创建节点 1 先创建一个节点 2 确定节点的内容 3 给创建的父级末置追加 标签.appendChild() var new_li = document.createElement('li'); // 创建节点 new_li.innerHTML = '6'; //给节点添加内容 ne..
JS 使用cloneChild 克隆元素节点
热门推荐
又是再见?
06-21 1万+
<html test 克隆 橘子 草莓 哈密瓜 苹果 葡萄 猕猴桃 var btn4Obj = document.getElementById('btn4'); var ulObj = document.getElementsByClassName('ul'); var lis = document.getEl
JavaScript-177：节点操作之克隆节点
臧小川的博客
01-20 388
效果图 结构 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> JS var ul = document.querySelector('ul'); // node.cloneNode(); 括号为空 或者里面是 false 浅拷贝 只复制标签 不复制内容 /
JavaScript 用cloneNode方法克隆节点的代码
10-27
// 克隆节点 clonedNode.setAttribute("id", "div-" + i); // 修改一下id值，避免id重复 sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点 } } ``` 在这个例子中，我们克隆了一个带有...
JS实现添加,替换,删除节点元素的方法
10-22
JavaScript提供了DOM API来访问和修改这个树，实现对网页的动态操作。 **添加节点元素**：JavaScript提供了几种方法来添加节点。最基础的方法是使用`createElement`来创建新的元素节点，再使用`appendChild`或`...
JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf
11-13
JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 在 JavaScript 中，DOM（Document Object Model）是指...JavaScript 操作 DOM 可以实现动态地创建、插入、删除、克隆和访问节点，从而实现了对文档的动态操作。
js克隆一段html元素,javascript克隆元素样式的实现代码
weixin_39890543的博客
06-05 839
/*** 克隆元素样式* @param {HTMLElement} 被克隆的元素* @param {Boolean} 是否启用缓存(默认true)* @return {String} css类名*/var cloneStyle = (function (doc) {var rstyle = /^(number|string)$/,cloneName = '${cloneName}',sData =...
Javascript 节点克隆详解
大剑师兰特的GIS世界
05-30 909
在JavaScript中，`Node.cloneNode()`方法用于克隆一个节点。克隆可以是浅克隆（只复制节点本身，不包括其子节点）或者是深克隆（复制节点及其所有后代节点）。默认情况下，该方法执行的是浅克隆。
htmljs克隆标签
05-24
克隆标签克隆标签克隆标签
用js克隆节点
weixin_33896069的博客
12-11 98
2019独角兽企业重金招聘Python工程师标准>>> ...
Javascript：克隆一个DOM节点
听海边涛声
06-25 334
Javascript：克隆一个DOM节点
JavaScript 用 cloneNode 方法克隆节点
weixin_33939380的博客
10-02 1135
为什么80%的码农都做不了架构师？>>> ...
javascript克隆节点
liuyikk163的专栏
12-30 959
克隆节点最简单的方式就是使用cloneNode(true)来实现，这是最简单也是最直接的方式。 但是，总有但是，在IE里面，这个cloneNode却有我们不想要的动作。 如果在页面的head中写了一些外链的javascript     在这个时候，如果想要克隆整个head节点，那就用head.cloneNode(true); OK，问题出现了，在IE9中，global.js会被
关于javascript的节点克隆
LM_Hh的博客
10-18 107
关于javascript的节点克隆 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> </head> <body> <div> <p>这个老六<b>我服了</b></p> </div> <sc...
JS克隆
BaLaBoom的博客
10-12 171
克隆分为浅层克隆和深度克隆 //浅层克隆 var obj = { name: ‘a’, age: 2, family: { father: ‘aa’, mother: ‘bb’ } } var obj1 = {} function clone(origin, target) { for (var prop in origin) { target[prop] = origin[prop]; } } ...
JavaScript节点克隆与删除
yhywm的博客
08-08 650
javascript节点操作过程中的问题 这是在节点克隆，和删除节点是出现的错误。以下代码逻辑上看似没有错误，但是运行会发现var parent = deleteimg.parentNode;处会报错，说是找不到子节点。 原因分析：克隆对象段代码var images = document.getElementsByClassName(“images”)[0];和var parent = dele...
jQuery实现节点克隆
05-19
使用jQuery可以很方便地实现节点克隆，可以使用clone()方法来进行克隆，具体步骤如下： 1. 选择要克隆的节点，并使用clone()方法进行克隆，同时将克隆节点保存在一个变量中。 ```javascript var cloneNode = $('#originalNode').clone(); ``` 2. 可以对克隆节点进行一些修改，比如修改节点的属性、样式、内容等。 ```javascript cloneNode.attr('id', 'cloneNode'); cloneNode.css('color', 'red'); cloneNode.html('This is a clone node.'); ``` 3. 将克隆节点插入到目标节点中，可以选择在目标节点前或后插入，也可以作为目标节点的子节点插入。 ```javascript $('#targetNode').after(cloneNode); // 插入到目标节点后 $('#targetNode').before(cloneNode); // 插入到目标节点前 $('#targetNode').append(cloneNode); // 插入到目标节点内部 ``` 完整代码示例： ```html <!DOCTYPE html> <html> <head> <title>jQuery Clone Node</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $('#cloneBtn').click(function(){ // 克隆节点 var cloneNode = $('#originalNode').clone(); // 修改节点属性、样式、内容 cloneNode.attr('id', 'cloneNode'); cloneNode.css('color', 'red'); cloneNode.html('This is a clone node.'); // 插入克隆节点 $('#targetNode').after(cloneNode); }); }); </script> </head> <body> <div id="originalNode">This is the original node.</div> <button id="cloneBtn">Clone Node</button> <div id="targetNode">This is the target node.</div> </body> </html> ``` 在上面的示例中，点击“Clone Node”按钮后会将原始节点克隆并插入到目标节点后面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值