<!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. 微信浏览器video播放视频踩坑

    video属性介绍 iOS的属性 playsinline On iPhone, video playsinline elements will now be allowed to play inlin ...

  2. windows Apache ab安装及压力测试

    一:安装 ab是Apache自带的网站压力测试工具.使用起来非常的简单和方便.不仅仅是可以Apache服务器进行网站访问压力测试,还可以对其他类型的服务器进行压力测试.比如nginx,tomcat,I ...

  3. [BZOJ2669][CQOI2012]局部极小值：DP+容斥原理

    分析 题目要求有且只有一些位置是局部极小值.有的限制很好处理,但是只有嘛,嗯...... 考虑子集反演(话说这个其实已经算是超集反演了吧还叫子集反演是不是有点不太合适),枚举题目给出位置集合的所有超集 ...

  4. win10笔记本设置管理员权限

    1.在右下方任务栏的“搜索web和windows”输入框中输入“gpedit.msc”,电脑会自行搜索,搜索完毕之后鼠标点击打开.

  5. 第五周总结 & 实验报告（三）

    第五周总结 一.继承       1.类的继承格式 class 父类{} class 子类 extends 父类{} 2.扩展类的功能 class 父类{ 父类属性: .......... ..... ...

  6. python连接字符串的几种方法--转子（香草拿铁的园子）

    一. str1+str2 string类型 ‘+’号连接 >>> str1="Good" >>> str2="Luck" & ...

  7. SQL Server database mail问题诊断一例

    产品环境sql server database的mail发不出邮件,影响客户的业务,在数据库中进行诊断 诊断sql: EXEC msdb.dbo.sp_send_dbmail @profile_nam ...

  8. RotateZoom.cpp——Inter

    // RotateZoom.cpp : Defines the entry point for the console application. // #include "stdafx.h& ...

  9. OpenStack Nova 高性能虚拟机之 NUMA 架构亲和

    目录 文章目录 目录 写在前面 计算平台体系结构 SMP 对称多处理结构 NUMA 非统一内存访问结构 MPP 大规模并行处理结构 Linux 上的 NUMA 基本对象概念 NUMA 调度策略 获取宿 ...

  10. 终于, Delphi XE2 携带 GDI+ 库了

    终于, Delphi XE2 携带 GDI+ 库了 使用了较早的 http://www.progdigy.com uses Winapi.GDIPAPI, Winapi.GDIPOBJ{, Winap ...