<!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. asp.net验证码图片生成示例

    验证码,一个很常见的东西.不管你是使用者还是开发者,这个东西80%的人都见到过,但是之前有人给我说过这么一句话“内行看门道,外行看热闹!”,仔细琢磨一下还真的是那么一回事.对于怎么实现验证码,闲话不多 ...

  2. bzoj1074

    题意: 给你n次折叠 m个询问 每次询问折叠后,xi,yi有几层 题解: 计算几何 模拟 #include<cstdio> #include<cstdlib> #include ...

  3. elasticsearch 自定义similarity 插件开发

    转自:http://www.chepoo.com/elasticsearch-similarity-custom-plug-in-development.html 在搜索开发中,我们要修改打分机制,就 ...

  4. javascript: 数据类型深入理解

    1.基本类型(值类型或者原始类型): Number.Boolean.String.NULL.Undefined以及ES6的Symbol2.引用类型:Object.Array.Function.Date ...

  5. Win7安装netbeans 找不到JDK

    安装netbeans,直接运行官方下载的.exe安装包,提示找不到jdk,我jdk已安装1.7,环境变量已配好.然后百度,找到很多都是linux下的解决方案,win7的很少,然后看到说--javaho ...

  6. Android系统服务（一）解析ActivityManagerService(AMS)

    相关文章 Android系统启动流程系列 Android应用进程系列 Android深入四大组件系列 前言 此前在Android系统启动流程.应用进程以及深入四大组件这三个系列文章中,都提及到了AMS ...

  7. React Native入门指南

    转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...

  8. Mac Book Pro重新安装出错

    错误描述 未能创建用于apfs安装的预启动宗卷 解决 网上的经验: 返场重修 多试几次拼人品 多试了几次之后还是没用,选择U盘安装. 搞定! U盘安装教程

  9. rancher下的kubernetes之二：安装rancher和kubernetes

    在上一章<rancher下的kubernetes之一:构建标准化vmware镜像>,我们做了个通用的虚拟机镜像,可以root登录,apt已经更新,docker也装好了,现在我们就来安装ra ...

  10. Linux之screen命令详解

    一.nohup 工作中经常会遇到这样的需求,通过SecureCRT或其它工具远程到服务器执行某个任务,而这个任务耗时又比较长,你又不得不等待它执行完毕,但是如果此间如果关掉窗口或断开连接又会导致任务被 ...