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. Java数据结构和算法之哈希表

    五.哈希表 一般的线性表.树中,记录在结构中的相对位置是随机的即和记录的关键字之间不存在确定的关系,在结构中查找记录时需进行一系列和关键字的比较.这一类查找方法建立在“比较”的基础上,查找的效率与比较 ...

  2. sublime 的使用

    常见问题: ctrl+`快捷见弹不出console怎么办! 解决方法: 估计适合电脑其他软件的快捷键冲突了,在sublime里面重新设置下快捷键 点击菜单中Preferences下面的Key Bind ...

  3. JavaBean基本用法示例(一)

    一.首先创建一个类person,里面有四个成员:name,sex,age,info,添加四个成员所有的set和get方法. package com.kaly.bean; public class pe ...

  4. Vmvare下Ubuntu安装Python3.4

    Ubuntu14.4下默认安装的Python版本是2.7.随着Python3.4的使用,现在大部分Python开发者都喜欢使用Py3.4.那么Ubuntu下应该怎么安装Python3.4呢? (1). ...

  5. input file上传文件扩展名限制

    方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...

  6. jedisPool.returnBrokenResource 弃用

    for (int i = 0; i < 1000000 ; i++) { //使用Pool的方式 调用Redis JedisPool jedisPool = SpringContextHolde ...

  7. selenium加载时间过长

    为了获取网站js渲染后的html,需要利用selenium加载网站,但是会出现加载时间过长的现象,因此可以限制其加载时间以及强制关掉加载: # !/usr/bin/python3.4 # -*- co ...

  8. Win7打补丁以后vs2012突然出现的程序版本不兼容问题

    装这个: Update for Microsoft Visual Studio 2012 (KB2781514) http://www.microsoft.com/en-us/download/det ...

  9. [linux] Nginx编译安装错误error: the HTTP rewrite module requires the PCRE library

    nginx编译错误: 执行如下命令安装缺少的文件即可

  10. empty()和isset()的区别

    如果变量为0,则empty()会返回TRUE,isset()会返回TRUE:如果变量为空字符串,则empty()会返回TRUE,isset()会返回TRUE:如果变量未定义,则empty()会返回TR ...