<html>

<head>

<title>Test of cloneNode Method</title>

<script type="text/javascript" src="test.js"></script>

</head>

<body>

<div id="main">

<div id="div-0">

<span>Cloud018 said, </span>

<span>"Hello World!!!"</span>

</div>

</div>

</body>

</html> 

// test.js

window.onload = function () {

var sourceNode = document.getElementById("div-0"); // 获得被克隆的节点对象

for (var i = 1; i < 5; i++) {

var clonedNode = sourceNode.cloneNode(true); // 克隆节点

clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重复

sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点

}

}

原地址:https://zhidao.baidu.com/question/1574784863775980300.html

js循环复制一个div的更多相关文章

  1. 原生js怎么删除一个 div

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

  2. JS 实现复制一个或多个内容到剪贴板

    需要实现的功能:点击button,复制如下值到剪贴板, 链接:http://192.168.0.203:7083/share/nRrDLqBBJFjXQ5lk9Nv60GV6 提取码: 3NmH 常用 ...

  3. 用JS 循环做一个表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  5. 移动端无法复制：使用clipboard.js碰到的一个小问题

    移动端无法复制:使用clipboard.js碰到的一个小问题   直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...

  6. 一个 div 手写红绿灯- 分别用css3 和 js 实现

    [要求] 一个div,配合 css3 或者 js 实现红绿灯切换的效果. [思路] 使用 css3,要实现红绿灯颜色的变换必然要用到 animation 动画,通过 keyframes 控制颜色的渐变 ...

  7. 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  8. 原生js实现一个DIV的碰撞反弹运动

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

  9. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

随机推荐

  1. Kafka设计解析（十七）Kafka 0.11客户端集群管理工具AdminClient

    转载自 huxihx,原文链接 Kafka 0.11客户端集群管理工具AdminClient 很多用户都有直接使用程序API操作Kafka集群的需求.在0.11版本之前,kafka的服务器端代码(即添 ...

  2. Spring源码分析（七）bean标签的解析及注册

    摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 在上一篇中提到过Spring中的标签包括默认标签和自定义标签两种,而两种 ...

  3. PAT乙级1021

    1021 个位数统计 (15 分)   给定一个 k 位整数 N=d​k−1​​10​k−1​​+⋯+d​1​​10​1​​+d​0​​ (0≤d​i​​≤9, i=0,⋯,k−1, d​k−1​​& ...

  4. Mysql安装(win10 64位)

    公司的测试数据库只有读的权限,而且还不能用IP和端口去访问,所有很多时候不方便(尤其是想练手的时候).闲着也是闲着,自己搭建一个Mysql数据库出来.以下操作,全部基于win10专业版 64位,仅供参 ...

  5. P3183 [HAOI2016]食物链

    题目描述 如图所示为某生态系统的食物网示意图,据图回答第1小题现在给你n个物种和m条能量流动关系,求其中的食物链条数.物种的名称为从1到n编号M条能量流动关系形如a1 b1a2 b2a3 b3.... ...

  6. HDU2546（01背包加一点点变形）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2546 饭卡 Time Limit: 5000/1000 MS (Java/Others)    Me ...

  7. SEGGER RTT STOP/SLEEP 模式下使用

    1.问题详述, M3/M4内核在sleep 或者 STOP模式 下,内核是不工作的,因此需要 以下 几步操作 第一步: 开启 低功耗模式下,debug 的连接 DBGMCU_Config(DBGMCU ...

  8. java.sql.SQLSyntaxErrorException: ORA-01722: 无效数字

    ### Error updating database. Cause: java.sql.SQLSyntaxErrorException: ORA-01722: 无效数字 ### The error ...

  9. linux查看日志文件内容命令（面试被常问到的问题）

    tail -f test.log 你会看到屏幕不断有内容被打印出来. 这时候中断第一个进程Ctrl-C, linux 如何显示一个文件的某几行(中间几行) 从第3000行开始,显示1000行.即显示3 ...

  10. Codeforces VK Cup 2018 Div.2

    总题面传送门 这次考试只过了3题,前三题题目难度并不大,但是第三题的代码细节卡了我两个半小时(基本上整场考试),所以以后要合理把握时间,注意把握代码细节,并更加完善我的代码风格,使其更加简练.(赛外话 ...