<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. (转)Python学习笔记系列——Python是一种纯粹的语言

    此文出自知乎灵剑,原文传送门:https://zhuanlan.zhihu.com/p/23926957. 在摸索适合自己的语言学习方法,看到一篇好文章,转之,侵删. Python的语法范式相当多.知 ...

  2. C#中 DateTime , DateTime2 ,DateTimeOffset 之间的小区别 （转载）

    闲来无事列了个表比对一下这3兄弟之间还是有一点差距的╮(╯_╰)╭   DateTime DateTime2 DateTimeOffset 日期范围 1753-01-01到 9999-12-31 00 ...

  3. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  4. PhpStorm 回到上次编辑位置的快捷键

    回到上次编辑位置 Ctrl + Alt + <- (向后) Ctrl + Alt + -> (向前) 这个快捷键有时和电脑桌面快捷键冲突.解决办法: win + D 回到电脑桌面,右键-& ...

  5. mybatis第一天——入门与概述

    大纲摘要: 1.mybatis的介绍 2.Mybatis的入门 a) 使用jdbc操作数据库存在的问题 b) Mybatis的架构 c) Mybatis的入门程序 3.Dao的开发方法 a) 原始da ...

  6. 20155239 2017-11-19 实现mypwd(选做，加分)

    20155239 2017-11-19 实现mypwd(选做,加分) 题目和要求 学习pwd命令 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 实现mypwd 测试mypwd ...

  7. 《Java 程序设计》课堂实践项目-Arrays和String单元测试

    <Java 程序设计>课堂实践项目-Arrays和String单元测试 课后学习总结 目录 改变 Arrays和String单元测试实验要求 课堂实践成果 课后思考 改变 修改了博客整体布 ...

  8. OSG环境变量设置

    osg中需要设置一些环境变量设置,如 OSG_FILE_PATH:此变量设置模型数据的目录 OSG_SCREEN: 此变量设置显示模型是在单屏幕还是多屏幕,1为单屏幕 OSG_WINDOW: 此变量设 ...

  9. 【BZOJ1070】[SCOI2007]修车

    [BZOJ1070][SCOI2007]修车 题面 以后要多写题面flag 题目描述 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同 ...

  10. 【mysql】排序方操作50题练习及其答案

    1.创建数据库.相关表,并插入数据create database homework;use homework; create table class_grade(gid int primary key ...