js AppendChild与insertBefore用法详细对比

我们知道appendChild和insertBefore都有插入节点的功能。但在应用上，这两者之间还是有一些区别的。

比如我们要在下面这个div中插入一个子节点P时：

<div id="test"><p id="x1">Node</p><p>Node</p></div>

我们可以这样写(测试某种情况时请将另外一种注释)：


代码如下:

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
//测试从这里开始
//appendChild方法：
oTest.appendChild(newNode);
//insertBefore方法：
oTest.insertBefore(newNode,null);
</script>

通过以上的代码，可以测试到一个新的节点被创建到了节点div下，且该节点是div最后一个节点。(如要查看DOM，IE可以通过IE Developer Toolbar插件来查看，Firefox可以使用Firebug)

很明显，通过这个例子，可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

在上面的例子中有这样一句代码：oTest.insertBefore(newNode,null) ，这里insertBefore有2个参数可以设置，第一个是和appendChild相同的，第二却是它特有的。它不仅可以为null，还可以为：


代码如下:

<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild);
</script>

这个例子将在x1节点前面插入一个新的节点

又或：


代码如下:

<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>

这个例子将在x1节点的下一个节点前面插入一个新的节点

还可为：


代码如下:

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]); 
</script>

这个例子将在第一子节点前面插入一个新的节点，也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点，但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来，发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。

从这几个例子中得出：
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

赞 (0)

相关推荐

  • javascript中onclick(this)用法介绍

    this指触发事件的对象 复制代码 代码如下: <input id="myinput" type="text" value="javascript中onclick中的this" onclick="javascript:test(this);"/> 复制代码 代码如下: function test(obj){ alert(obj); //[object HTMLInputElement] alert(obj.id);

  • javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 复制代码 代码如下: var newInput = document.createElement("input"); 2.设定相关属性,如name,type等  复制代码 代码如下: newInput.type=mytype;   newInput.name="input1"

  • js给onclick事件赋值，动态传参数实例解说

    我们先看看错误的例子 Html代码 复制代码 代码如下: <body> <input id="certid" type="text" value="123456" > <input id="btn" type="button" value="button" onclick=""> </body> Javascript代码

  • js中AppendChild与insertBefore的用法详细解析

    appendChild定义appendChild(newChild: Node) : NodeAppends a node to the childNodes array for the node.Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法target.appendChil

  • js原生appendChild的bug解决心得分享

    appendChild 主要是用来追加节点 插入到最后 复制代码 代码如下: window.onload = function(){ var ul2 = document.getElementById('ul2'); var oli = document.getElementsByTagName('li'); for(var i=0;i<oli.length;i++){ ul2.appendChild(oli[i]); } } <h3>讲Id为ul1的内容插入到ul2里面</h3&

  • 服务端拼接json数据格式的正确写法(Append方式)

    服务端拼接json数据格式的正确写法(Append方式)

    我们通常会在服务端拼接json数据返回给客户端,有时我们会采用第一种AppendFormat的方式拼接,这种方法是不行的,json外含有符号 " { " ,与拼接的占位符的符号冲突{0}-- " { " ,故而报输入的字符串格式不正确. 所以我们正确的拼接方式是Append的方式.

  • JS中append字符串包含onclick无效传递参数失败的解决方案

    append后面跟要添加的参数 <i class="fa fa-share pointer" aria-hidden="true" title="分享" onclick="share('${img.imgId}','${img.imgTitle}','${imgCover}','http://www.liuda.tv/selectedImg?imgId=${img.imgId}')"></i> 上面这段

  • JavaScript利用append添加元素报错的解决方法

    1.错误描述 在IE浏览器上: Uncaught HierarchyRequestError:Failed to excute 'appendChild' on 'Node':The new child element contains the parent. 在谷歌浏览器上: SCRIPT5022:DOM Exception:HIERARCHY_REQUEST_ERR(3) error 2.错误原因 在append()中包含append() 如: append(append("String&q

  • node.js中的fs.appendFile方法使用说明

    方法说明: 该方法以异步的方式将 data 插入到文件里,如果文件不存在会自动创建.data可以是任意字符串或者缓存. 语法: 复制代码 代码如下: fs.appendFile(filename, data, [options], callback) 由于该方法属于fs模块,使用前需要引入fs模块(var fs = require("fs") ) 接收参数: 1. filename {String} 2. data {String | Buffer} 3. options {Objec

  • js AppendChild与insertBefore用法详细对比

    我们知道appendChild和insertBefore都有插入节点的功能.但在应用上,这两者之间还是有一些区别的. 比如我们要在下面这个div中插入一个子节点P时: <div id="test"><p id="x1">Node</p><p>Node</p></div> 我们可以这样写(测试某种情况时请将另外一种注释): 复制代码 代码如下: <script type="text

  • js中indexof的用法详细解析

    String.IndexOf 方法 (Char, [startIndex], [count]) 报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置. 参数 value 要查找的 Unicode 字符. 对 value 的搜索区分大小写. startIndex(Int32) 可选项,搜索起始位置.不设置则从0开始. count(Int32) 可选项,要检查的字符位置数. 返回值 如果找到该字符,则为 value 的索引位置:否则如果未找到,则为 -1. I

  • js在指定位置增加节点函数insertBefore()用法实例

    本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点 具体代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodeli = document.createElement('li');//创建一个li节

  • 详细对比Ember.js和Vue.js

    详细对比Ember.js和Vue.js

    目录 概述 为什么要选择框架? Vue.js Ember.js Ember.js Vue.js对比 总结 概述 JavaScript最初是为Web应用程序创建的.但是随着前端技术的发展,大多数开发人员更喜欢使用基于JavaScript的框架.它简化了你的代码以及使你能完成更多全栈工作,您几乎可以在任何框架中使用JavaScript. 使用什么类型的框架决定了创建应用程序的便捷程度.因此,您必须慎重选择.在已经足够复杂的前端环境里,其中两个框架脱颖而出.我们会在本文中对Ember.js和Vue.j

  • appendChild() 或 insertBefore()使用与区别介绍

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"></div> 例1: 复制代码 代码如下: <script

  • JS+HTML5 FileReader对象用法示例

    本文实例讲述了JS+HTML5 FileReader对象用法.分享给大家供大家参考,具体如下: FileReader 实例中有四个方法来读取文件数据 1.readAsBinaryString(Blob|File) 2.readAsDataURL(Blob|File) 3.readAsText(Blob|File) 4.readAsArrayBuffer(Blob|File) FileReader 实例包含很多事件(onerror, onprogress, onload[result]) <inp

  • JavaScript之appendChild、insertBefore和insertAfter使用说明

    appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ 添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法 target.appen

  • Java与kotlin详细对比

    在Google I/O 2017中,Google 宣布 Kotlin 成为 Android 官方开发语言. 为什么选择 Kotlin? 简洁: 大大减少样板代码的数量. 安全: 避免空指针异常等整个类的错误. 互操作性: 充分利用 JVM.Android 和浏览器的现有库. 工具友好: 可用任何 Java IDE 或者使用命令行构建. 使用kotlin已经有一段时间了.打算从宏观上做一下java和kotlin的对比.java8虽然也有很多新特性,但是android低版本并不兼容.因此这里以旧版本

  • Python详细对比讲解break和continue区别

    目录 前言 break 例子 continue 例子 对比 前言 最近在回答问答python区的问题的时候,发现很多人对于这个break和continue分不清.所以,今天我就写篇文章来讲一下(绝对不是为了方便我以后回答的时候复制) break 在while和for循环中,只要满足一定的条件,程序就会结束,或者进入无限循环的境地.这个时候,我们就需要一个东西来帮助我们在满足某种条件的情况下,主动结束循环.或者说,我们希望有一个东西,能在循环的过程中的某个特定的阶段跳出,结束循环. break长和

随机推荐