插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>插入节点</title>

     <script type="text/javascript">

        //测试 insertBefore() 插入节点

         //该方法除了进行插入外, 还有移动节点的功能.

         window.onload=function(){

            //1. 把 #rl 插入到  #bj 节点的前面

             var cityNode=document.getElementById("city");

             var bjNode=document.getElementById("bj");

             var rlNode=document.getElementById("rl");

             alert("测试开始了")

             //cityNode.insertBefore(rlNode,bjNode);//(新，目标节点)

             //测试方法

             var refNode = document.getElementById("dj");

             insetAfter(rlNode,refNode);

         }

             //写一个insetAfter方法/把 newNode 插入到 refNode 的后面

             function insetAfter(newNode,refNode){

                 //1. 测试 refNode 是否为其父节点的最后一个子节点

                 var parentNode=refNode.parentNode;

                 if(parentNode){

                     var lastNode=parentNode.lastChild;

                 //2. 若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点

                     if(refNode==lastNode){

                         parentNode.appendChild(newNode);

                     }

                 //3. 若不是: 获取 refNode 的下一个兄弟节点, 然后插入到其下一个兄弟节点的前面.

                 else{

                     var nextNode=refNode.nextSibling;

                     parentNode.insertBefore(newNode,nextNode);

                 }

             }

         }

     </script>

 </head>

 <body>

     <p>你喜欢哪个城市?</p>

         <ul id="city"><li id="bj" name="BeiJing">北京</li>

             <li>上海</li>

             <li id="dj">东京</li>

             <li id="se">首尔</li>

         </ul>

         <br><br>

         <p>你喜欢哪款单机游戏?</p>

         <ul id="game">

             <li id="rl">红警</li>

             <li>实况</li>

             <li>极品飞车</li>

             <li>魔兽</li>

         </ul>

         <br><br>

         gender:

             <input type="radio" name="gender" value="male"/>Male

             <input type="radio" name="gender" value="female"/>Female

         <br><br>

         name: <input type="text" name="username" value="atguigu"/>

     </body>

 </html>

JavaScript的DOM编程--11--插入节点的更多相关文章

  1. JavaScript的DOM编程--10--删除节点

    1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...

  2. JavaScript的DOM编程--05--获取文本节点

    获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name=" ...

  3. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  4. javascript之DOM编程设置节点插入节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 轻松学习JavaScript二十二：DOM编程学习之节点操作

    DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  6. JavaScript HTML DOM 元素操作（节点）

      在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...

  7. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  8. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  9. JavaScript的DOM编程--04--获取元素节点的子节点

    获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...

随机推荐

  1. springmvc 4.3,RequestParamMethodArgumentResolver无法正常解析String参数问题解决

    搭建一个新工程时,想使用最新稳当版的springmvc,所以选择了最新的版本 <dependency> <groupId>org.springframework</gro ...

  2. javascript设计模式——中介者模式

    前面的话 程序由大大小小的单一对象组成,所有这些对象都按照某种关系和规则来通信.当程序的规模增大,对象会越来越多,它们之间的关系也越来越复杂,难免会形成网状的交叉引用.当改变或删除其中一个对象的时候, ...

  3. 基于百度地图SDK和Elasticsearch GEO查询的地理围栏分析系统（1）

    本文描述了一个系统,功能是评价和抽象地理围栏(Geo-fencing),以及监控和分析核心地理围栏中业务的表现. 技术栈:Spring-JQuery-百度地图WEB SDK 存储:Hive-Elast ...

  4. Create-React-App创建antd-mobile开发环境(学习中的记录)

    (参考别人结合自己的整理得出,若有错误请大神指出) Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能. 详 ...

  5. tf.train.ExponentialMovingAverage

    这个函数可以参考吴恩达deeplearning.ai中的指数加权平均. 和指数加权平均不一样的是,tensorflow中提供的这个函数,能够让decay_rate随着step的变化而变化.(在训练初期 ...

  6. JPA学习笔记（8）——映射双向一对多关联关系

    双向一对多关联关系 前面的博客讲的都是单向的,而本问讲的是双向的(双向一对多 = 双向多对一) 什么是双向? 我们来对照一下单向和双向 单向/双向 User实体类中是否有List< Order& ...

  7. Ubuntu使用之Svn命令小技巧

    注: [svn Path]:是指要代替码分支的server绝对路径 [Path]:是指终端相对当前文件夹的相对路径.假设是在当前文件夹下,就省略路径 ①.取svnserver的代码: svn co [ ...

  8. Android最佳性能实践(四)——布局优化技巧

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43376527 在前面几篇文章其中.我们学习了怎样通过合理管理内存,以及高性能编码技 ...

  9. hdu2601 An easy problem（数学）

    题目意思: http://acm.hdu.edu.cn/showproblem.php? pid=2601 给出一个数N,求N=i*j+i+j一共同拥有多少种方案. 题目分析: 此题直接暴力模拟就可以 ...

  10. HDU 4923 Room and Moor （多校第六场C题） 单调栈

    Problem Description PM Room defines a sequence A = {A1, A2,..., AN}, each of which is either 0 or 1. ...