<!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. Linux 的 Out-of-Memory (OOM) Killer

    同事在 Linux 服务器上遇到点小问题,我也上去折腾半天.这还是第一次注意到 Linux 这个多年来就存在的特性:OOM Killer .说白了 OOM Killer 就是一层保护机制,用于避免 L ...

  2. 056——VUE中vue-router之路由参数的验证处理保存路由安全

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 044——VUE中组件之使用内容分发slot构建bootstrap面板panel

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. halcon之共线连接union_collinear_contours_xld

    union_collinear_contours_xld 很多时候当我们用edges_sub_pix, threshold_sub_pix  等算子得到边缘后,因为有噪声.物体本身断裂等原因 很多边缘 ...

  5. Delphi 简体 繁体 转换

    http://delphi.ktop.com.tw/board.php?cid=30&fid=69&tid=104986 試看看 這個是豬寶寶從網路上抄來的 檢視純文字版列印? fun ...

  6. XML——概述

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  7. 由spring的工厂构造bean想到的

    被Spring管理的bean可以是直接创建实例,还可以通过工厂模式来进行创建.例如brave的tracing bean定义: <bean id="tracing" class ...

  8. 网站配色、网站模板网址 UE样式 metro报表

    http://www.colourlovers.com http://unmatchedstyle.com网站模板目录    花瓣 http://huaban.com/    油表 http://fl ...

  9. Android Studio使用JDBC远程连接mysql的注意事项（附示例）

    JDBC为java程序访问各种类型的关系型数据库提供了统一的接口,用户不必针对不同数据库写出不同的代码,但是使用JDBC必须得下载相应的驱动,比如我这里是要连接mysql,于是就到mysql官网去下载 ...

  10. websocket之四：WebSocket 的鉴权授权方案

    引子 WebSocket 是个好东西,为我们提供了便捷且实时的通讯能力.然而,对于 WebSocket 客户端的鉴权,协议的 RFC 是这么说的: This protocol doesn’t pres ...