js循环复制一个div
<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的更多相关文章
- 原生js怎么删除一个 div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS 实现复制一个或多个内容到剪贴板
需要实现的功能:点击button,复制如下值到剪贴板, 链接:http://192.168.0.203:7083/share/nRrDLqBBJFjXQ5lk9Nv60GV6 提取码: 3NmH 常用 ...
- 用JS 循环做一个表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- 移动端无法复制：使用clipboard.js碰到的一个小问题
移动端无法复制:使用clipboard.js碰到的一个小问题 直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...
- 一个 div 手写红绿灯- 分别用css3 和 js 实现
[要求] 一个div,配合 css3 或者 js 实现红绿灯切换的效果. [思路] 使用 css3,要实现红绿灯颜色的变换必然要用到 animation 动画,通过 keyframes 控制颜色的渐变 ...
- 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
- 原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...
- 【转】js实现复制到剪贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
随机推荐
- 微信授权获取用户openid前端实现
近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url h ...
- CSU 2056 a simple game （正反进行KMP）超级好题！！！
Description 这一天,小A和小B在玩一个游戏,他俩每人都有一个整数,然后两人轮流对他们的整数进行操作,每次在下列两个操作任选一个: (1)对整数进行翻转,如1234翻转成4321 ,1200 ...
- python 3.x 循环读取文件用户登录
import os # 导入python自带库的模块 import sys # 导入python自带库的模块 import getpass # 导入python自带库的模块 lock_file = ' ...
- C语言实现随机数
最近在看<The C Programming Language>这本书,看到一个关于随机数的知识点,有种豁然开朗的感觉.以前总靠死记硬背,也不明白为啥是这样,而且总把srand()遗漏.相 ...
- VS2010调试和头文件路径设置
1:VS2010 release 调试C/C++ -> 常规 -> 调试信息格式, 修改为程序数据库(/Zi)C/C++ ->优化 -> 优化,修改为已禁用(/Od)链接器 - ...
- 1444: [Jsoi2009]有趣的游戏
1444: [Jsoi2009]有趣的游戏 链接 分析: 如果一个点回到0号点,那么会使0号点的概率增加,而0号点的概率本来是1,不能增加,所以这题用期望做. 设$x_i$表示经过i的期望次数,然后初 ...
- DELL R710使用4T硬盘亮黄灯
事件背景 公司DELL R710的物理机上面运行的SQL SERVER数据库,因存储空间不足需要扩充空间.现系统盘(300G SAS 6Gbps 15K*2)RAID 1,数据盘(500G SAS 6 ...
- Kali2.0可用国内源更新sources.list
vim /etc/apt/sources.list #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contri ...
- python中面向对象_类_对象的概念与定义
1. 面向对象的概念,面向对象是一种编程思想. 是对现实世界中一类事物的抽象,在编程中可以理解为是一种建立现实世界事物的模型 2. 面向对象和面向过程的区别: 面向过程关注的是完成工作的步骤. 面向 ...
- 斐讯K2 PSG1218 刷机教程 基于Breed互刷 清除配置
Padavan官方论坛http://www.right.com.cn/forum/thread-161324-1-1.html Breed官方文档http://www.right.com.cn/for ...