<!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. 【Leetcode】二分法

    题目: 在排序数组中查找元素的第一个和最后一个位置. 二分法的思想非常简单,然而其中的实现细节非常繁琐,容易出错.本推文非常详细地介绍二分法的实现细节. 总结几点注意事项: 初始上.下界的取值: 判断 ...

  2. 线程工具类ThreadUtils

    package yqw.java.util; public class ThreadUtils { /**     * showThreadInfo     *      * @return     ...

  3. ant design Radio.Group defaultValue 默认选中没生效

    版本问题 (3.10.7 版本中使用 defaultValue) <div> <Radio.Group defaultValue="a" buttonStyle= ...

  4. Pycharm,出现Invalid VCS root mapping The directory 解决方法

    Pycharm File 中setting-------version control  中VCS选择none  后选择ok 执行完以上的步骤,还错误就会消失.

  5. 【转】博弈论——acm

    转自http://blog.csdn.net/lgdblue/article/details/15809893 序:博弈是信息学和数学试题中常会出现的一种类型,算法灵活多变是其最大特点,而其中有一类试 ...

  6. Java并发编程的艺术笔记（二）——wait/notify机制

    一.概述 一个线程修改了一个对象的值,另一个线程感知到变化从而做出相应的操作.前者是生产者,后者是消费者. 等待/通知机制,是指一个线程A调用了对象O的wait()方法进入等待状态,而另一个线程B调用 ...

  7. centos7 安装 eclipse

    1.到eclipse官网下载 https://www.eclipse.org/downloads/packages/ spring 官网 https://spring.io/tools3/eclips ...

  8. NDK undefined reference to 'rand'

    NDK 编译 结果报错undefined reference to 'rand' 最怪异的是armeabi-v7a armeabi的情况下有问题 但是arm64-v8a编译正常,用网上说的添加头文件s ...

  9. Android NDK的生命周期JNI_OnLoad与JNI_OnUnload(转)

    摘要 NDK的生命周期 //当动态库被加载时这个函数被系统调用 JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *reserved) { LOGI ...

  10. easyhook源码分析三——申请钩子

    EasyHook 中申请钩子的原理介绍 函数原型 内部使用的函数,为给定的入口函数申请一个hook结构. 准备将目标函数的所有调用重定向到目标函数,但是尚未实施hook. EASYHOOK_NT_IN ...