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的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
随机推荐
- openstack placement 组件作用理解
例如,一个资源提供者可以是一个计算节点,共享存储池,或一个IP分配池.placement服务跟踪每个供应商的库存和使用情况.例如,在一个计算节点创建一个实例的可消费资源如计算节点的资源提供者的CPU和 ...
- route(windows)
1.route delete 0.0.0.0 mask 0.0.0.0 10.33.31.254----------删除默认到内网网关的默认路由:2.route add -p 10.33.0.0 ma ...
- 第一章 Linux内核简介
1. 操作系统和内核 操作系统是指在整个系统中负责完成最基本功能和系统管理的那些部分.包括内核.设备驱动程序.启动引导程序.命令行shell或者其他种类的用户界面.基本的文件管理工具和系统工具. 用户 ...
- fastRPC服务使用
现在出现了很多中间件解决跨语言问题,使用RPC远程调用:但是庞大是个问题,而且要按照格式使用.尤其是源码量比较庞大. 为了简单易用,我采用订阅发布模型,在此基础上创建了fastRPC,模拟RPC,调用 ...
- docker 简要学习
一.Docker的安装和启动 使用环境centos7 yum包更新到最新 sudo yum update 安装需要的软件包,yum-util提供yum-config-manager功能 sudo yu ...
- windows下beautifulsoup使用lxml解析使用报错
s4.FeatureNotFound: Couldn't find a tree builder with the features you requested: lxml. Do you need ...
- Fiddler设置代理后，iphone手机无法访问网络的全面解决办法
好久不抓手机包,都有些忘记了,电脑上软件都在,原本是Fiddler4,现在已自动升级到V5. 入主题吧,首先Fiddler设置好代理,然后手机安装证书好了,设置手机代理,结果iphone无法访问网络, ...
- 大数据调错系列之：自己总结的myeclipse连接hadoop会出现的问题
在我们学习或者工作中开始hadoop程序的时候,往往会遇到一个问题,我们写好的程序需要打成包放在集群中运行,这无形中在浪费我们的时间,因为程序可以需要不断的调试,然后把最终程序放在集群中即可.为了解决 ...
- C语言常用知识点
C语言条件预处理命令 /* 格式: #ifdef 标识符 程序1 #else 程序2 #endif 标识符已经定义时,程序段1才参加编译 应用:如调试版本,发行版本,便于调试 */ #include ...
- WebLogic远程命令执行
靶机说明 目标ip:172.16.53.28(window 2003) 本靶机所针对的序列化漏洞系列以及常见安全问题如下: 弱口令登陆控制台部署war包webshell CVE-2018-2893 C ...