<!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. sh_03_第1个函数

    sh_03_第1个函数 # 注意:定义好函数之后,之表示这个函数封装了一段代码而已 # 如果不主动调用函数,函数是不会主动执行的 def say_hello(): print("hello ...

  2. 苹果CMSv10宝塔全自动定时采集教程

    伙伴们在建立好自己的网站添加自定义资源库后,由于手动采集方式比较耗时间和精力更新也不够及时,是不是特别希望能有一个全自动定时采集方法来帮助网站增加视频资源解放自己的双手,那么现在就教大家如何用宝塔一步 ...

  3. 6.Python缩进规则（包含快捷键）

    和其它程序设计语言(如 Java.C 语言)采用大括号“{}”分隔代码块不同,Python 采用代码缩进和冒号( : )来区分代码块之间的层次. 在 Python 中,对于类定义.函数定义.流程控制语 ...

  4. [CSP-S模拟测试]:格式化（贪心）

    题目传送门(内部题105) 输入格式 每组数据第一行一个正整数$n$,表示硬盘块数,接下来$n$行,每行两个正整数,第一个正整数为硬盘格式化前的容量,第二个正整数为格式化之后的容量. 输出格式 对每组 ...

  5. [CSP-S模拟测试]:简单的括号序列（组合数）

    题目传送门(内部题82) 输入格式 一行一个字符串$ss$,保证$ss$中只包含$'('$和$')'$. 输出格式 一行一个整数,表示满足要求的子序列数对$10^9+7$的结果. 样例 样例输入1: ...

  6. MySQL表碎片清理

    MySQL大表清理 生产环境data库业务表base_data大小:500G,data_free:31G mysql> SELECT table_schema,table_name,data_f ...

  7. IFG以太网帧间隙

    交换机的线速 描述交换机性能可以使用“线速”这个概念,那它是什么意思呢?所谓的线速是指经过交换机处理的理想状态下最大数据率.描述数据率可以用bps(bit per second)和mpps(milli ...

  8. BDD Cucumber 实战

    cucumber cucumber 是一个用于执行 BDD 的自动化测试工具. 用户指南 创建 Spring Boot 项目并引入依赖 <?xml version="1.0" ...

  9. winform带你玩转rabbitMQ

    http://www.cnblogs.com/dubing/p/4017613.html

  10. 分布式任务队列 Celery

    目录 目录 前言 简介 Celery 的应用场景 架构组成 Celery 应用基础 前言 分布式任务队列 Celery,Python 开发者必备技能,结合之前的 RabbitMQ 系列,深入梳理一下 ...