<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. JS-移动端判断上拉和下滑

    一.手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑. 二.js中距离:pageY.clientY.offsetY的区别: offsetY:相对于父节点的偏移距 ...

  2. 【图像处理】Schmid滤波器

    Schmid也是一种类Gabor图像滤波器,在这篇文章[1]中有详细推导和介绍. 一种更简洁的表达公式是: 当中,r为核半径,Z为归一化參数,τ和σ是比較重要的參数,在ReID提取TextFeatur ...

  3. 为Python加入默认模块搜索路径

    为Python加入默认模块搜索路径 方法一:函数加入 1) import sys 2) 查看sys.path 3) 加入sys.path.append("c:\\") 方法二:改动 ...

  4. mysql/mariadb将选择查询的结果重新生成一张新表格

    比如想要生成类似如下的表格 mysql> select student.*,sc.cno,course.cname,sc.grade,course.cpno,course.ccredit fro ...

  5. Linux磁盘与文件系统管理（一）

    fdisk 常用的磁盘分区工具,受mbr分区表的限制,只能给小于2TB的磁盘划分分区,如果使用fdisk对大于2TB的磁盘进行分区,虽然可以分区,但只能识别2T的空间,一般使用parted分区工具 - ...

  6. vue指令：v-model绑定表单控件；v-model与v-bind结合使用

    一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...

  7. PHP：CURL分别以GET、POST方式请求HTTPS协议接口api

    1.curl以GET方式请求https协议接口 //注意:这里的$url已经包含参数了,不带参数你自己处理哦GET很简单 function curl_get_https($url){ $curl = ...

  8. HTTP协议图

  9. Verilog 奇数分频

    代码: module odd_div( ); ; //分频系数,3即3分频 ; reg clk, rstn, clk_div_pos, clk_div_neg; wire clk_div_out; : ...

  10. java四舍五入

    package com.clzhang.sample; import java.math.BigDecimal; import java.math.RoundingMode; import java. ...