<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        .box1,
        .box2{
            width: 300px;
            height: 250px;
            margin-top: 10px;
            margin-bottom: 30px;
            border: 1px solid green;
        }

        .box1 > div,
        .box2 > div{
            border: 1px solid red;
            margin: 5px;
            padding: 10px 5px;
        }
    </style>

    <script type="text/javascript">
        //测试创建元素
        function testCreate(){
            var div = document.createElement("div");
            div.innerHTML = "this is a new div";
            div.style.color = "green";
            var target = document.querySelector('.box1');
            var target2 = document.querySelector('.box2');
            target.appendChild(div);
            //cloneNode  克隆元素   传值为true的时候  为深层次克隆  false为浅层次克隆
            target2.appendChild(div.cloneNode(true));
        }

        function testInertBefore(){
            var box11 = document.querySelector(".box1 > .box11");
            var box22 = document.querySelector(".box2 > .box22");

            var parent = document.querySelector(".box2");

            parent.insertBefore(box11.cloneNode(true),box22);
        }

        function testReplaceChild(){
            var box11 = document.querySelector(".box1 > .box11");
            var box22 = document.querySelector(".box2 > .box22");
            var parent = document.querySelector(".box2");

            parent.replaceChild(box11,box22);
        }
        function testRemoveChild(){
            var box22 = document.querySelector(".box2 > .box22");
            var parent = document.querySelector(".box2");

            parent.removeChild(box22);
        }

    </script>
</head>
<body>
<input type="button" onclick="testCreate()" value="create">
<input type="button" onclick="testInertBefore()" value="testInertBefore">
<input type="button" onclick="testReplaceChild()" value="testReplaceChild">
<input type="button" onclick="testRemoveChild()" value="testRemoveChild">
<hr>
<div class="box1">
    <div class="box11">this is a div test 11</div>
    <div class="box12">this is a div test 12</div>
    <div class="box13">this is a div test 13</div>
    <div class="box14">this is a div test 14</div>
</div>
<div class="box2">
    <div class="box21">this is a div test 21</div>
    <div class="box22">this is a div test 22</div>
    <div class="box23">this is a div test 23</div>
    <div class="box24">this is a div test 24</div>
</div>
</body>
</html>

js中改变文档的层次结构(创建元素节点,添加结点,插入子节点,取代子节点,删除子节点)的更多相关文章

  1. Linux命令 改变文档权限及所有者

    Linux命令 改变文档权限及所有者 chgrp :改变档案所属群组 chown :改变档案拥有者 chmod :改变档案的权限, SUID, SGID, SBIT等等的特性 chgrp说明及范例 [ ...

  2. ubuntu命令改变文档权限和所有者

    chgrp :改变档案所属群组 chown :改变档案拥有者 chmod :改变档案的权限, SUID, SGID, SBIT等等的特性,可读.可写.可执行 1 chgrp 例子 chgrp [-R] ...

  3. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  4. Express 4 更新改变文档

    概览 从 Express 3 到Express 4 是一个巨大的变化,这意味着现存的 Express 3 应用在不更新依赖的情况下将不能工作. 这篇文章涵盖一下内容: Express 4 中的变化 一 ...

  5. js模拟浏览器加载效果 pace.js 中文官方文档

    2017年2月20日12:11:25 官网URL:http://github.hubspot.com/pace/docs/welcome/ 文档 http://github.hubspot.com/p ...

  6. node.js 中的package.json文件怎么创建？

    最近在用webstorm和nodejs做一些东西,老是各种混乱,今天上午创建一个新的项目,结果发现,npm init之后,并没有出现package.json,并没有太明确他的功能的小姑娘表示十分的惊慌 ...

  7. Laya改变文档结构后GameConfig自动生成错误问题

    原来的WeaponPanel,ItemPanel,PetPanel改变了路径,然后GameConfig还是一直生成旧的路径,因为旧路径已经不存在,所以提示报错,编译不过去. 需要把编辑模式下的改路径相 ...

  8. apache 改变文档根目录www的位置

    1.找到apache的安装目录,找到config/httpd.conf,找到DocumentRoot "D:/wamp/www/" 改成你想要的目录,例如:改成 DocumentR ...

  9. js中的对象和数组的创建

    <!DOCTYPE html><html><head> <title>获取控制</title> <meta charset=" ...

随机推荐

  1. 16款最受关注的智能手表 苹果iWatch领衔

    智能手表逐渐成为科技行业的新宠,而传闻中的苹果iWatch以及已经确认即将推出的三星Galaxy Gear,显然让这股热潮达到了顶峰,也预示着大牌厂商将逐渐进入该领域,推出更多成熟的产品.以下便是16 ...

  2. DTD文档说明

    模块说明 l  元素 l  属性 l  实体 l  PCDATA(parsed character data) PCDATA 是会被解析器解析的文本.这些文本将被解析器检查实体以及标记. l  CDA ...

  3. 《转》深入理解Activity启动流程(四)–Activity Task的调度算法

    本文原创作者:Cloud Chou. 出处:本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 深入理解Activity启动流程(一)--Activity启 ...

  4. Alpha冲刺 （4/10）

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9979357.html 作业博客:https://edu.cnblogs.com/campus/ ...

  5. protel 99se 加载库文件 files not recognised 解决办法-转

    WIN7操作系统下,protel99se添加元件库的操作方法(非修改ADVSch99SE方法) 最近更换了新电脑,操作系统是正版的WIN7,在用protel时发现元件库无法加载,很是郁闷,上网查找解决 ...

  6. ubuntu16.04 源码安装Python3.7 （可以在此基础上安装Tensorflow） (确保Tensorflow计算框架与系统的彻底隔离)

    Python3.7 源码下载: https://www.python.org/downloads/release/python-370/ 解压源码: tar -zxvf Python-3.7.0.tg ...

  7. opencv之批量转换灰度图并保存

    当图片名字有数字规律时,批量处理方式. ①srcImage 图片名字有规律 ②将srcImage文件下的图片,转换为灰度图并保存入grayImage文件夹. ③ #include <iostre ...

  8. PCB 设计文件中哪些可以不做成元件

    PCB 文件中哪些可以不做成元件 在 PCB 设计时有些元件为了快速,实际并不需要做成元件. 因为做成元件会浪费时间,并且生产时也没有实际的元件. 如下(持续更新): PCB 与 PCB 之前的连接人 ...

  9. (原创)AP6212蓝牙模块在am335x控制板上的应用

    主控板wifi模块调通后接着调试蓝牙,经过两周的摸索,终于把蓝牙应用基本建立起来,下面记录下大概流程. 1.硬件管脚设置 static void uart4_init(int evm_id, int ...

  10. CentOS6.6 VSFTP服务器安装设置

    1:安装vsftpd    yum install vsftpd 2:关闭防火墙 service iptables stop 3:允许21端口通行 vi /etc/sysconfig/iptables ...