<!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. ossim中Spot5模型bug修复

    ossim中Spot5模型在读取像素视线角时存在一个严重的bug,导致某些点的视线角提取错误. 下面是ossim中getPixelLookAngleX 函数的代码: ossimSpotDimapSup ...

  2. js 数据函数

    //shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5]  ...

  3. 在返回值拒绝——reference

    在上一篇博客中,我们介绍了简单地使用值传递带来的种种麻烦,相信有些朋友会一心一意将其斩草除根,但是当返回值也使用了引用的时候,麻烦就来了. 依然来个简答的例子 class Rational { pub ...

  4. 在将对象数组转换为json字符串

    private List<WHCombineBatchFragmentBarcodeEnterEvent.Message.Data> dataList = new ArrayList< ...

  5. 一个简单的观察者模式的JS实现

    这不是原创文章,主要是写给自己看的.原文比较详细容易让人,我提取最简单最好理解的部分,便于我以后用到.参考http://www.cnblogs.com/TomXu/archive/2012/03/02 ...

  6. [置顶] 【机器学习PAI实践十一】机器学习PAI为你自动写歌词，妈妈再也不用担心我的freestyle了（提供数据、代码

    背景 最近互联网上出现一个热词就是"freestyle",源于一个比拼rap的综艺节目.在节目中需要大量考验选手的freestyle能力,freestyle指的是rapper即兴的 ...

  7. 用pil产生验证码出现：ImportError: The _imagingft C module is not installed

    这个是由于PIL没有编译freetype导致的查看 lib/python2.7/site-packages/PIL/看看 _imagingft.so 是否存在 # 需要先安装jpeg库wget htt ...

  8. .NET/C# 使用反射注册事件

    使用反射,我们可以很容易地在运行时调用一些编译时无法确定的属性.方法等.那么如何注册事件呢? 本文将介绍如何使用反射注册事件. 本文内容 不使用反射 使用反射 安全地使用反射 参考资料 不使用反射 例 ...

  9. Keep On Movin

    上回书说道不愿透露姓名的巨巨还剩下一个数组,这个数组记录了他学习c++ 语言的过程. 现在这个数组a里有一些字符,第i个字符的数量是a[i].巨巨想用这些字符来构造一些回文串好让他的程序通过编译. 他 ...

  10. fackbook flow 简单使用

    flow 是一个javascript 静态检查的工具,由facebook 开发, 使用起来简单,方便. 安装 项目初始化 yarn init -y 编译器安装 yarn add --dev babel ...