JS元素复制

以你之姓@ 2022-02-22 16:52 264阅读 0赞

JS实现元素复制，使用克隆的方式，

**如下图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z0b3BxeA_size_16_color_FFFFFF_t_70][]

**代码如下：**

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>JS元素复制</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    </head>
    <body>
    <script>
    
    var i =1;  
    function tianjia() { 
    	var sourceNode = document.getElementById("div-0"); // 获得被克隆的节点对象   
    	var clonedNode = sourceNode.cloneNode(true); // 克隆节点   
    	clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重复   
    	sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点   
    	i=i+1;   
    }  
    
    </script>
    
    <div id="main">   
    	<div id="div-0">   
    		<span>"div---"</span>   
    	</div>   
    <button id="btn1" onclick="tianjia()">复制</button>  
    </div>   
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z0b3BxeA_size_16_color_FFFFFF_t_70]: /images/20220222/c1ddb600163944949c250bc85f90fb8a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读

相关 js原生实现鼠标点击元素复制指定的内容

js原生实现鼠标点击元素复制指定的内容:直接看代码吧: <!DOCTYPE html> <html lang="en"> <head> <m

向右看齐/ 2023年08月17日 15:49/ 0 赞/ 144 阅读

相关 JS_js复制文本

function copy(text){ var input = document.createElement("input"); input.s

蔚落/ 2023年01月17日 13:53/ 0 赞/ 196 阅读

相关 js 复制

// 单个复制 <div id=“fuzhi">复制</div> <p id="copyBT”>复制内容</p> function copyA

小灰灰/ 2023年01月17日 07:33/ 0 赞/ 79 阅读

相关 js 复制

<p @click="copyHandler(colorName)"> function copyHandler(name: string) {

待我称王封你为后i/ 2022年09月15日 12:43/ 0 赞/ 152 阅读

相关 js的浅复制和深复制

1.来看一个例子(浅复制) var test={ zcj:'isGood'} var test2=test test.zcj='isLo

爱被打了一巴掌/ 2022年05月30日 09:08/ 0 赞/ 260 阅读

相关 js复制粘贴

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

女爷i/ 2022年05月29日 00:48/ 0 赞/ 276 阅读

相关 js复制操作

vue下实现复制操作 <template> <div class="red"> <div @click="copyToClipboard($event)"> { {

谁践踏了优雅/ 2022年05月27日 11:05/ 0 赞/ 235 阅读

相关 js复制粘贴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

心已赠人/ 2022年05月12日 07:06/ 0 赞/ 266 阅读

相关 js—操作元素

<table> <tbody> <tr> <td align="left"><font>js添加元素</font></td> </tr>

た入场券/ 2022年04月17日 02:09/ 0 赞/ 209 阅读

相关 JS元素复制

JS实现元素复制，使用克隆的方式，如下图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

以你之姓@/ 2022年02月22日 16:52/ 0 赞/ 265 阅读