<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <script>

        window.onload=function()

        {

            var father=document.getElementById("father");

            var chade=document.createElement("div");  //创建节点

            father.appendChild(chade);  //添加节点，放到所有孩子的最后面

            var chade2=document.createElement("div");

            var kidall=father.children;  //父亲的所有孩子

            father.insertBefore(chade2,kidall[1]); //插入到父亲第2个孩子的前面，那么就称为父亲的第二个孩子

            var chade3=document.createElement("div");

            father.insertBefore(chade3,null); //如果第二个参数是null,默认是放到最后面

            father.removeChild(chade3); //移除chade3这个孩子

            chade.parentNode.appendChild(chade.cloneNode()); //chade的爸爸添加节点相当于添加chade的兄弟

            father.appendChild(father.cloneNode()); //父亲添加一个和他长得一模一样的孩子

            var kid1=document.getElementById("kid1");

            kid1.appendChild(kid1.cloneNode());//kid1添加一个孩子，名字也叫做Kid1

        }

    </script>

</head>

<body>

    <div id="father">

        <div id="kid1"></div>

        <div class="kid2"></div>

    </div>

</body>

</html>

　　

dom的节点操作的更多相关文章

  1. DOM之节点操作

    DOM提供了很多实用的API,这些API让我们可以轻松的访问HTML文档.所谓API(应用程序接口),简单来说,就是让我们可以直接使用它访问程序的一些属性或方法,而不用了解程序内部的运作过程和原理. ...

  2. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  3. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  4. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  5. 第6章 DOM节点操作

    一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  6. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  7. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  8. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  9. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

随机推荐

  1. sqli-labs(36)

    0X01发现又是‘’被过滤了 ?id=%df%%20and%=%23 错误 ?id=1%df%27%20and%201=1%23 正确   存在注入 0X01爆数据库 ?id=-%df%%20unio ...

  2. bootstrap editable 行内编辑

    除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件: <link href="../assets/css/bootstr ...

  3. 说下Java堆空间结构，及常用的jvm内存分析命令和工具

    Java堆空间结构图:http://www.cnblogs.com/SaraMoring/p/5713732.html JVM内存状况查看方法和分析工具: http://blog.csdn.net/n ...

  4. 2018-2019-2 网络对抗技术 20165235 Exp 9 Web安全基础

    实验任务 本实践的目标理解常用网络攻击技术的基本原理,做不少于7个题目,共3.5分.包括(SQL,XSS,CSRF).Webgoat实践下相关实验. 基础问题回答 (1)SQL注入攻击原理,如何防御 ...

  5. @清晰掉 c语言三"巨头" const：volatile：static

    const: 1.如果把const放在变量类型前,说明这个变量的值是保持不变的(即为常量),改变量必须在定义时初始化,初始化后对她的任何赋值都是非法的. 2.当指针或是引用指向一个常量时,必须在类型名 ...

  6. memcached空指针内存错误与死循环问题分析（memcached dead loop and crash bug! issue #260 and issue #370）

    (由于这是发在memcached邮件列表的,所以只能用一下蹩脚的英文了) (you should read the discuss about issue #260 first:  https://g ...

  7. idea中@data不生效

    idea中@data不生效,原因是idea中没有安装插件,记得重启

  8. Dataframe的索引问题

    1 两个Dataframe相加时,一定要注意索引是否对应再相加,利用这个特点有时可以先用set_index()将某些列置为索引列,再进行相加. import pandas as pd df1 = pd ...

  9. python学习笔记：（七）dict（字典）常用的方法

    字典是通过名称来引用值的数据结构,这种类型的数据结构称为:映射. 字典是python中唯一的内建映射类型. 注意: 1.字典中键必须是唯一的,如果同一个键被赋值两次,会使用后一个值: 2.键必须不可变 ...

  10. Zabbix4.0.1使用自带模板监控Linux主机 CPU、内存、硬盘、网卡

    环境: 前提已经安装好zabbix服务端.zabbix客户端, zabbix_server端ip和主机名信息:    ip:192.168.1.204 hostname:  www.test.com ...