<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. STL容器与拷贝构造函数

    所有容器提供的都是“value语意”而非“reference语意”.容器内进行元素的安插操作时,内部实施的是拷贝操作,置于容器内.因此STL容器 的每一个元素都必须能够拷贝.---<<C+ ...

  2. springMVC框架 对BaseCtrl封装，简化开发

    让你的项目有对象,你的项目如何才会有面向对象特征呢?没有面向对象特征的项目不是好项目哦.此篇博文会使用到面向对象特征中的封装继承,还有就是枚举类型.这篇博文教你如何让你的项目体现面向对象特征. 最近公 ...

  3. MySQL数据库 utf-8与utf8mb4

              MySQL的“utf8”实际上不是真正的UTF-8.          MySQL中的“utf8”只支持每个字符最多三个字节,而真正的UTF-8是每个字符最多四个字节. MySQL ...

  4. 用HTML编写淘宝页面

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

  5. swoft orm中的坑（针对实体类的属性名称和数据库字段不相等）

    最近在用swoft的orm,发现了一些问题: 首先看下实体类的定义 它的属性名称和所映射的数据库字段名不一致,这个就会导致蛋疼的问题,首先,在我们使用orm的时候,应该使用哪个字段? 我直接说结论,在 ...

  6. PHPCMS v9 手机端栏目绑定模板

    phpcms的手机端,模块是有了,但是有些地方用的还不是很舒服,其中移动端栏目无法绑定模板就不是很方便.如图,所有的栏目绑定的模板是固定的. 这次咱们就来处理下,移动端如何设置相应的模板.这里说是设置 ...

  7. 数据结构与算法之Stack（栈）——重新实现

    之前发过一篇stack的实现,是采用dart内置的List类并固定长度数组实现的.这里重新实现一版,重复利用List类内置特性和方法.实现更为简洁. class Stack<E> { fi ...

  8. 【转】SQL中的锁、脏读、不可重复的读及虚读

    原文:http://blog.csdn.net/wjeson/article/details/9382067 锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题 ...

  9. 20155211 2016-2017-2 《Java程序设计》第九周学习总结

    20155211 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第十六章 整合数据库 一.JDBC入门 (一)JDBC简介 厂商在操作JDBC驱动程序时,依 ...

  10. 26-[jQuery]-内容补充

    jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件.jqueryUI知识点 jqueryUI 官网: https://jqueryui.com/ jqueryUI 中文网: http ...