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. 设计模式之二:MVC

    模型(Model) 视图(View) 控制器(Controller) (MVC) 是 Cocoa 中的一种行为模块,并且也是所有 Cocoa 设计模式中使用最多的.在程序中按照它们的角色来分类这些对象 ...

  2. Jmeter—5 关联 响应数据传递-正则表达式提取器

    在测试过程中,遇到一个问题:用户登录成功后服务器会返回一个登录凭证,之后所有的操作都需要带上此凭证.我们怎么获取登录凭证并传递给后续的操作? Jmeter提供了正则表达式提取器,用变量提取参数,后续通 ...

  3. 关于if(a<b<c)判断的问题

    由于判断时的执行顺序,不要写成if(a<b<c)这种形式,很有可能得出的结果与我们想像的结果不一致,要写成if(a<b && b<c)!

  4. 【LeetCode OJ】Path Sum

    Problem Link: http://oj.leetcode.com/problems/path-sum/ One solution is to BFS the tree from the roo ...

  5. C语言解决八皇后问题

    #include <stdio.h> #include <stdlib.h> /* this code is used to cope with the problem of ...

  6. HDU 2277 Change the ball

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2277 Change the ball Time Limit: 2000/1000 MS (Java/O ...

  7. Spring概况

    1. Spring是什么 Spring是一个开源框架,为了解决企业应用开发的复杂性而创建的,但现在已经不止于企业应用. 是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. ——从大小与开 ...

  8. 加速你的py.test, pytest-dist

    URL: https://pypi.python.org/pypi/pytest-xdist 多线程跑测试 Command: py.test -d --tx 3*popen

  9. CC3000 SPI接口编程介绍

    CC3000 SPI 操作: CC3000的SPI 是基于五根线CLCK,CSn,IRQ,MISO,MOSI:通信模式如下图: CLCK:时钟频率0-26M从主机到从机,提供SPI接口时钟 CSn:低 ...

  10. lsm-tree

    https://www.quora.com/How-does-the-Log-Structured-Merge-Tree-work http://blog.cloudera.com/blog/2012 ...