<!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. 自定义springmvc参数解析器

    实现spring HandlerMethodArgumentResolver接口 通过使用@JsonArg自定义注解来解析json数据(通过fastjson的jsonPath),支持多个参数(@Req ...

  2. （52）LINUX应用编程和网络编程之七Linux线程

    3.7.1.再论进程 3.7.1.1.多进程实现同时读取键盘和鼠标 3.7.1.2.使用进程技术的优势 (1)CPU时分复用,单核心CPU可以实现宏观上的并行.微观上的串行 (2)实现多任务系统需求( ...

  3. 值不能为空。参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explorer)

    打开MSSQL 2008 R2的时候,展开数据库都显示以下的错误提示: 值不能为空.参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explo ...

  4. Python-Django WebAPi基本使用方法

    目的 利用django搭建一个WebApi,实现数据库表的增删查改. 数据传输基于Http协议,数据格式:JSON ORM方式进行数据库表的CRUD(增删查改) 开发步骤 使用pycharm专业版搭建 ...

  5. leetcode-easy-array-122 best time to buy and sell stocks II

    mycode  69.45% class Solution(object): def maxProfit(self, prices): """ :type prices: ...

  6. 搭建ORACLE11g_RAC_单实例_ADG 注意事项

    搭建ORACLE11g_RAC_单实例_ADG 建库时候的注意事项:实例名为orcl1SYS@orcl1>select instance_name from v$instance; INSTAN ...

  7. iOS常用加密之RSA加密解密

    前言: iOS常用的加密有很多种,前两天在工作中遇到了RSA加密,现在把代吗分享出来. RSA基本原理 RSA使用"秘匙对"对数据进行加密解密.在加密解密数据前,需要先生成公钥(p ...

  8. 【mysql】时间类型-如何根据不同的应用场景，选择合适的时间类型？

    首先理解mysql时间存储类型,与使用场景 一些帮助理解的资料: 摘自:MySQL如何存储时间datetime还是timestamp MySql中关于日期的类型有Date/Datetime/Times ...

  9. C#中winform下利用ArcEngine调用ArcGIS Server发布的服务 AE 10

    开发环境:vs2010 + AE 10 测试 public Form1() { ESRI.ArcGIS.RuntimeManager.Bind(ESRI.ArcGIS.ProductCode.Engi ...

  10. DELPHI中函数、过程变量的声明与应用

    Procedure型变量: 在DELPHI中,函数.过程的地址可以赋给一个特殊类型的变量,变量可用如下方式声明: var p : procedure(num:integer); //过程 或: var ...