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

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.appendChild(newChild)

newChild作为target的子节点插入最后的一子节点之后

appendChild例子
var newElement = document.Document.createElement('label');
newElement.Element.setAttribute('value', 'Username:');

var usernameText = document.Document.getElementById('username');
usernameText.appendChild(newElement);

insertBefore定义
The insertBefore() method inserts a new child node before an existing child node.

insertBefore() 方法的作用是：在现有的子节点前插入一个新的子节点

insertBefore用法
target.insertBefore(newChild,existingChild)

newChild作为target的子节点插入到existingChild节点之前

existingChild为可选项参数，当为null时其效果与appendChild一样

insertBefore例子
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";

oTest.insertBefore(newNode,oTest.childNodes[0]);

好了那么有insertBefore的应该也有insertAfter吧？
好那我们来用Aptana编写一个例子吧，但Aptana的智能提示告诉我其实没有insertAfter这个方法
那么就自己定义一个罗:)

insertAfter定义
function insertAfter(newEl, targetEl)
{
      var parentEl = targetEl.parentNode;

if(parentEl.lastChild == targetEl)
      {
           parentEl.appendChild(newEl);
      }else
      {
           parentEl.insertBefore(newEl,targetEl.nextSibling);
      }           
}

insertAfter用法与例子
var txtName = document.getElementById("txtName");
var htmlSpan = document.createElement("span");
htmlSpan.innerHTML = "This is a test";
insertAfter(htmlSpan,txtName);

将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后

总结：
1、appendChild和insertBefore是做对节点的方法来使用的，而insertAfter只是自定义的一个函数

2、insertBefore相对于appendChild来说，比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。

3、使用appendChild和insertBefore来插入新的节点前提是，其兄弟节点必须有共同的父节点

赞 (0)

相关推荐

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

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

  • 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&

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

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

  • 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

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

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

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

  • 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);

  • 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

  • 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中opener与parent的区别详细解析

    opener即谁打开我的,比如A页面利用window.open弹出了B页面窗口,那么A页面所在窗口就是B页面的opener,在B页面通过opener对象可以访问A页面. parent表示父窗口,比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent.在JS中,window.opener只是对弹出窗口的母窗口的一个引用.比如:a.html中,通过点击按钮等方式window.open出一个新的窗口b.html.那么在b.html中,就可以通过window.o

  • js中window.open()的所有参数详细解析

    [1.最基本的弹出窗口代码]  复制代码 代码如下: <SCRIPT LANGUAGE="javascript">  <!--  window.open ('page.html')  -->  </SCRIPT> 因为着是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间.<!-- 和 -->是对一些版本低的浏

  • c++中new的三种用法详细解析

    一. 简介new有三种使用方式:plain new,nothrow new和placement new. (1)plain new顾名思义就是普通的new,就是我们惯常使用的new.在C++中是这样定义的:    void* operator new(std::size_t) throw(std::bad_alloc);    void operator delete(void *) throw(); 提示:plain new在分配失败的情况下,抛出异常std::bad_alloc而不是返回NU

  • 详解JS中的reduce fold unfold用法

    fold(reduce) 说说reduce吧, 很喜欢这个函数,节省了不少代码量,而且有一些声明式的雏形了,一些常见的工具函数,flatten,deepCopy,mergeDeep等用reduce实现的很优雅简洁.reduce也称为fold,本质上就是一个折叠数组的过程,把数组中的多个值经过运算变成一个值,每次运算都会有一个函数处理,这个函数就是reduce的核心元素,称之为reducer,reducer函数是个2元函数,返回1个单值,常见的add函数就是reducer const addRed

  • js中split和replace的用法实例

    本文实例讲述了js中split和replace的用法.分享给大家供大家参考.具体分析如下: 1. split : 复制代码 代码如下: <html> <head>     <title>     从业人员继续教育报名列表--打印签到表 sdfsd</tr><tr></tr>  sdfsd     </title> </head> <body>      <script type="t

  • JS中substring与substr的用法

    substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数 描述 start 必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop 可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. 返回值 一个新的字符串,该字符串值包含 stringObject 的一个子字符串

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • JS中appendChild追加子节点无效的解决方法

    JS中appendChild追加子节点无效 有这么一段代码: let divs = document.getElementsByClassName('test'); let btn = document.createElement('div'); for(let i=0;i<divs.length;i++){ divs[i].appendChild(btn); } 表面上这段代码为每个 class属性为 test的元素添加一个 div子元素. 看起来没有什么问题,但是执行完之后却发现子元素并没有

  • JS中call和apply函数用法实例分析

    本文实例讲述了JS中call和apply函数用法.分享给大家供大家参考,具体如下: call 函数 语法 obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]); 简介 thisObj继承obj的属性和方法(obj原型链上的属性和方法不能被继承),后面的参数会当成obj的参数安装顺序传递进去. 示例 function animal(type,nickname){ this.type = type; this.nickname = nickname; this.s

随机推荐