1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点。比如:appendChild(newchild)括号里可以是创建的标签var newchild = document.createElement

2.insertBefore() 方法:可在已有的字节点前中插入一个新的子节点。比如:insertBefore(newchild,rechild)

3.相同之处:插入子节点。

4.不同之处:appendChild方法是在父节点中的字节点的末尾添加新的节点(相对于父节点来说)。insertBefor方法是在已有的节点前添加新的节点(相对于子节点来说的)

下面将举例说明:

效果是在box-one的末尾插入新的div。

2.第二个例子:新建的元素节点插入到id为p1的元素面前

3.第三个例子:新建的元素节点插入到id为p1的元素后面

insertBefor()方法插入节点,是可以在子节点列表的任意位置

JS中插入节点的方法appendChild和insertBefore的应用的更多相关文章

  1. JS(JavaScript)插入节点的方法appendChild与insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  2. lintcode:在二叉查找树中插入节点

    题目:  在二叉查找树中插入节点 给定一棵二叉查找树和一个新的树节点,将节点插入到树中. 你需要保证该树仍然是一棵二叉查找树.  样例 给出如下一棵二叉查找树,在插入节点6之后这棵二叉查找树可以是这样 ...

  3. Markdown中插入数学公式的方法

    Markdown中插入数学公式的方法 文章来源:http://blog.csdn.net/xiahouzuoxin/article/details/26478179 自从使用Markdown以来,就开 ...

  4. 在Altium_Designer_PCB_中插入图片的方法

    详细请看PDF: http://files.cnblogs.com/files/BinB-W/在Altium_Designer_PCB_中插入图片的方法.pdf 配套文件: http://files. ...

  5. 在js中插入html语句

    连上数据库之后,填充数据时往往需要在js中插入html语句 做法是: <body> <div class="modal-body" id="delete ...

  6. DXP中插入LOGO图片方法(1)

    DXP中插入LOGO图片方法 1.QQ截图后,打开“开始”-->"附件"——>"画图工具",如图: 2.另存为BMP文件格式(设置图片大小.黑白色即 ...

  7. node.js中的url.parse方法使用说明

    node.js中的url.parse方法使用说明:https://blog.csdn.net/swimming_in_it_/article/details/77439975 版权声明:本文为博主原创 ...

  8. js:插入节点appendChild insertBefore使用方法

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  9. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

随机推荐

  1. AngularJS向指令传递数据

    我今天要实现的功能是利用AngularJS来完成客户端过滤器. list.html页面主要代码如下: ...... <div class='tj_con_tr_ipt' ng-init=&quo ...

  2. Python print格式化输出

    python中的print格式化输出,基本格式:"[字符串]%格式1[字符串]%格式2[字符串]....."%(string1,string2.....) 格式符号 ------- ...

  3. 用idea写servlet文件

    1:File->Project Structure 加号处添加tomcat api(在lib目录下) 2:写servlet文件 src->new servlet写好类名和包名 3:配置we ...

  4. mysql插入数据后返回自增ID的方法

    mysql和oracle插入的时候有一个很大的区别是,oracle支持序列做id,mysql本身有一个列可以做自增长字段,mysql在插入一条数据后,如何能获得到这个自增id的值呢? 方法一是使用la ...

  5. 黑马程序员:Java编程_泛型

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 没有使用泛型时,只要是对象,不管是什么类型的对象,都可以存储进同一个集合中.使用 ...

  6. High Precision Timers in iOS / OS X

    High Precision Timers in iOS / OS X The note will cover the do's and dont's of using high precision ...

  7. D - Prepared for New Acmer

    Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Pract ...

  8. Sublime Text 3开启自动换行

    在Submine Text 3中要开启自动换行功能只需要两个步骤: 1.找到查看(View) 2.点击弹出菜单中的自动换行即可 但是如果是在2中的话就相对麻烦少少,现在也说下其开启自动换行功能的步骤: ...

  9. Windowns的GVIM添加markdown语法支持

    gvim 7.4中其实也是有对markdown的语法文件,但格式支持并不全面,如行业代码``就没有实现. 修改方案: 从github下载plasticboy的markdown语法版本,windowns ...

  10. PostgreSQL数据库基本配置

    一.安装 首先安装PostgreSQL客户端: sudo apt-get install postgresql-client 然后,安装PostgreSQL服务器: sudo apt-get inst ...