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的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
随机推荐
- DB2创建表、操作表等常用命令
转载:http://hi.baidu.com/ufobject/item/7fd03aeebf7be1266dabb881 一.创建库表 1.创建库 1).创建数据语句 CREATE DATABASE ...
- ra寄存器定位core
$ra寄存器中存入的是pc的值(程序运行处的地址),调用函数时,在跳转前,必须保存当前地址(pc的值),以便后来返回.jal $ra 保存后跳转,jr $ra,返回到跳转前,通过$ra保存进入上层栈地 ...
- css3 学习图谱
摘要 最近看了一篇文章,建立最近的知识体系,对于工作了几年的大牛需要,但对学生学习同样也需要,我试着做了自己的css知识总图,类似目录,引导我的学习路线. 3-28日总结 根据该图谱,我学习得更有方向 ...
- CPP strcat函数使用
strcat函数原型 char * strcat ( char * destination, const char * source ); strcat常见写法 // main.cpp // 字符数组 ...
- 腾讯云centos7.2安装mysql5.7
一.查看是否安装mysql rpm -qa | grep mysql 什么都没显示,说明没有安装 二.进入到opt目录下,使用wget下载官方yum源的rpm包 cd /opt wget https: ...
- redis 基本数据类型-字符串(String)
不瘦原来对redis也是有个大概的了解(就你知道的多), 但是最近和大神聊天的过程中才明白自己知道的简直就是鸡毛蒜皮(让你得瑟),所以不瘦打算从头在捋一遍,顺便把过程也记录下来,如果能给大家在学习re ...
- Scala_修饰符
Scala访问修饰符和Java基本一样,分别有private.protected.public.默认缺省情况下,Scala对象的访问级别是public. 私有成员:用private关键字修饰的成员仅在 ...
- Java 中的extends 和 implements
初学Java语言, 代码中的extends和implements让我感到很迷惑,现在终于弄明白它们之间的区别和用法了. //定义一个Runner接口 public inerface Runner { ...
- AGC 030 B - Tree Burning
B - Tree Burning 链接 题意: 一个长度为L的环,有n个位置上有树,从0出发,每次选择一个方向(顺时针或者逆时针),一直走,直到走到一棵树的位置,烧掉这棵树,重复这个过程,直到没有树. ...
- P3707 [SDOI2017]相关分析
P3707 [SDOI2017]相关分析 线段树裸题?但是真的很麻烦QAQ 题目给的式子是什么不用管,大力拆开,就是\(\frac{\sum x_iy_i-\overline xy_i-\overli ...