insertbefore(js中AppendChild与insertBefore的用法详细解析)
大家好,今天小编来为大家解答以下的问题，关于insertbefore，js中AppendChild与insertBefore的用法详细解析这个很多人还不知道，现在让我们一起来看看吧！
js中的insertbefore和jquery中的insertbefore的区别
一、after()和before()方法的区别
after()——其方法是将方法里面的参数添加到jquery对象后面去；
如：A.after(B)的意思是将B放到A后面去；
before()——其方法是将方法里面的参数添加到jquery对象前面去。
如：A.before(B)的意思是将A放到B前面去；
二、insertAfter()和insertBefore()的方法的区别
其实是将元素对调位置；
可以是页面上已有元素；也可以是动态添加进来的元素。
如：A.insertAfter(B);即将A元素调换到B元素后面；
如<span>CC</span><p>HELLO</p>使用$("span").insertAfter($("p"))后，就变为<p>HELLO</p><span>CC</span>了。两者位置调换了
三、append()和appendTo()方法的区别
append()——其方法是将方法里面的参数添加到jquery对象中来；
如：A.append(B)的意思是将B放到A中来，后面追加,A的子元素的最后一个位置；
appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。
如：A.appendTo(B)的意思是将A放到B中去，后面追加,B的子元素的最后一个位置；
四、prepend()和prependTo()方法的区别
append()——其方法是将方法里面的参数添加到jquery对象中来；
如：A.append(B)的意思是将B放到A中来，插入到A的子元素的第一个位置；
appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。
如：A.appendTo(B)的意思是将A放到B中去，插入到B的子元素的第一个位置；
例子
1、insert局部方法
/**
*在父级元素上操作DOM
*@param{Object} parent父级元素，可以是element，也可以是Yquery对象
*@param{String} position位置: beforebegin/afterbegin/beforeend/afterend
*@param{*} any任何：string/text/object
*@param{Number} index序号，如果大于0则复制节点
*@return{Undefined}
*@version 1.0
* 2013年12月2日17:08:26
*/
function _insert(parent, position, any, index){
if($.isFunction(any)){
any= any.call(parent);
}
//字符串
if($.isString(any)){
if(regTag.test(any)){
parent.insertAdjacentHTML(position, any);
} else{
parent.insertAdjacentText(position, any);
}
}
//数字
else if($.isNumber(any)){
parent.insertAdjacentText(position, any);
}
//元素
else if($.isElement(any)){
parent.insertAdjacentElement(position, index> 0? any.cloneNode(!0): any);
}
// Yquery
else if(_isYquery(any)){
any.each(function(){
_insert(parent, position, this);
});
}
}
2、append、prepend、before、after
$.fn={
/**
*追插
*将元素后插到当前元素（集合）内
*@param{String/Element/Function} any
*@return this
*@version 1.0
* 2013年12月29日1:44:15
*/
append: function(any){
return this.each(function(index){
_insert(this,'beforeend', any, index);
});
},
/**
*补插
*将元素前插到当前元素（集合）内
*@param{String/Element/Function} any
*@return this
*@version 1.0
* 2013年12月29日1:44:15
*/
prepend: function(any){
return this.each(function(index){
_insert(this,'afterbegin', any, index);
});
},
/**
*前插
*将元素前插到当前元素（集合）前
*@param{String/Element/Function} any
*@return this
*@version 1.0
* 2013年12月29日1:44:15
*/
before: function(any){
return this.each(function(index){
_insert(this,'beforebegin', any, index);
});
},
/**
*后插
*将元素后插到当前元素（集合）后
*@param{String/Element/Function} any
*@return this
*@version 1.0
* 2013年12月29日1:44:15
*/
after: function(any){
return this.each(function(index){
_insert(this,'afterend', any, index);
});
}
};
3、prependTo、prependTo、insertBefore、insertAfter
这些带后缀的与上面的不同的是，返回的结果不一样。如：
$('#demo').append('<a/>');
//=>返回的是$('#demo')
$('<a/>').appendTo($('#demo'));
//=>返回的是$('a');
因此两者的关系只是返回结果不一样，其他的都一样，可以这么解决：
_each({
appendTo:'append',
prependTo:'prepend',
insertBefore:'before',
insertAfter:'after'
}, function(key, val){
$.fn[key]= function(selector){
this.each(function(){
$(selector)[val](this);
});
return this;
};
});
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来插入新的节点前提是，其兄弟节点必须有共同的父节点
关于HTML DOM 中insertBefore与appendChild方法
insertBefore：在现有的子节点前加入一个新的子节点。
append：在现有的子节点后加入一个新的子节点。
target.insertBefore(newChild,existingChild);
target是父节点，newChild是要插入到existingChild节点之前的节点。
target.appendChild(newChild);
target是父节点，newChild是要插入到所有子节点之后的节点。
在IE下，使用 insertBefore时，第二个参数，也就是 existingChild可以被省略。
而在 Chrome与火狐下，第二个参数必须写上。
Chrome报错： Uncaught TypeError: Failed to execute‘insertBefore‘ on‘Node‘: 2 arguments required, but only 1 present.
火狐报错： TypeError: Not enough arguments to Node.insertBefore
关于insertbefore的内容到此结束，希望对大家有所帮助。