<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. 【vue】vue生命周期解读 （流程+钩子函数）

    参考详细说明一波简书 (vue中钩子函数解读) 1.实例渲染流程 2.生命周期钩子函数比 钩子函数详解简书一 钩子函数详解简书二

  2. iOS Class结构分析

    objc_class结构体 类在OC中是objc_class的结构体指针 typedef struct objc_class *Class; 在objc/runtime.h中objc_class结构体 ...

  3. 修改通达oa数据库root密码

    第一步: 打开通达oamysql远程网页地址:如http://127.0.0.1/mysql,点击修改密码功能按钮,根据提示修改,不要生成加密密码,执行即可! 第二步:修改service.php文件的 ...

  4. Mongodb 常用语法

    以下语法为在控制台使用的.假定有集合(相当于关系型数据库的库)qyxxcx,文档(相当于表)qyxx,jyzcjzs show dbs use qyxxcx db show collections d ...

  5. [折半搜索][哈希]POJ1186方程的解数

    题目传送门 这道题明显N数据范围非常小,但是M很大,所以用折半搜索实现搜索算法的指数级优化,将复杂度优化到O(M^(N/2)). 将搜出的两半结果用哈希的方式合并(乘法原理). Code: #incl ...

  6. K近邻算法小结

    什么是K近邻? K近邻一种非参数学习的算法,可以用在分类问题上,也可以用在回归问题上. 什么是非参数学习? 一般而言,机器学习算法都有相应的参数要学习,比如线性回归模型中的权重参数和偏置参数,SVM的 ...

  7. 04-cookies 会话跟踪技术

    1.会话跟踪技术 1.Http协议的无状态保存 会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应 2 .会话路径技术使用Cookie或session完成 我们知道HTTP协 ...

  8. Flutter - Stateful（有状态） 和 stateless（无状态） widgets

    Stateful(有状态) 和 stateless(无状态) widgets 有些widgets是有状态的, 有些是无状态的 如果用户与widget交互,widget会发生变化,那么它就是有状态的. ...

  9. 正则表达式30min

    如何使用本教程 正则表达式到底是什么东西? 入门 测试正则表达式 元字符 字符转义 重复 字符类 分枝条件 反义 分组 后向引用 零宽断言 负向零宽断言 注释 贪婪与懒惰 处理选项 平衡组/递归匹配 ...

  10. Qt-网易云音乐界面实现-7 消息中心实现，主要是QListWidget 自定义Item 和QTabwidget使用

    最近写的有点烦躁, 感觉内容真的很多!很多!很多. 目前真的想知道网易官方在出这款产品是,用了多少人和多长时间. 今天写的这个消息中心,有点糙,只是原理实现了没有完全复制过来,心里有团火,不想写了. ...