appendchild(appendchild用法)
关于JS中appendChild的用法
//?创建p节点
var?para=document.createElement("p");
//?创建文本节点
var?node=document.createTextNode("这是新段落。");
//?把文本节点添加到p节点里
para.appendChild(node);
//?查找div1
var?element=document.getElementById("div1");
//?把p节点添加到div1里
element.appendChild(para);
//?最终html结构
//?div?id="div1"
//?p?id="p1"这是一个段落。/p
//?p?id="p2"这是另一个段落。/p
//?p这是新段落。/p
//?/div
//?你测试的代码
//?创建文本节点
var?node=document.createTextNode("这是新段落。");
//?查找div1
var?element=document.getElementById("div1");
//?把文本节点添加到div1里
element.appendChild(node);
//?最终html结构
//?div?id="div1"
//?p?id="p1"这是一个段落。/p
//?p?id="p2"这是另一个段落。/p
//?这是新段落。
//?/div
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来插入新的节点前提是，其兄弟节点必须有共同的父节点
append和appendchild的区别
append()前面是要选择的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容且为Jquery对象，而后面是要选择的对象
实例：
$('#a').append('content');
$('divcontent/div').appendTo($('#a'));
注意appendTo前面一定要是Jquery对象。
appendChild(Node)这个 方法一般是在指定元素节点的最后一个子节点之后添加节点
但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。
appendChild你可以理解为移动一个元素。如果想复制一份过去，要事先clone
js里用append和appendChild有什么区别
与parentNode.appendChild()的区别在于：
parentNode.append()可以同时传入多个节点或字符串，没有返回值；他会有兼容问题
而parentNode.appendChild()只能传一个节点，且不直接支持传字符串(需要parentNode.appendChild(document.createTextElement('字符串'))代替)，返回追加的Node节点
