以下是一些示例代码:
function addTextNode(){
var newtext = document.createTextNode(" Some text added dynamically. ");
var para = document.getElementById("p1");
para.appendChild(newtext);
$("#p1").append("HI");
}
<div style="border: 1px solid red">
<p id="p1">First line of paragraph.<br /></p>
</div>
append()
和appendChild()
之间的区别是什么?
任何实时场景?
答案 0 :(得分:83)
主要区别在于appendChild
是一种DOM方法,而append
是一种jQuery方法。第二个使用第一个,你可以在jQuery源代码上看到
append: function() {
return this.domManip(arguments, true, function( elem ) {
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
this.appendChild( elem );
}
});
},
如果您在项目中使用jQuery库,那么在向页面添加元素时始终使用append
将是安全的。
答案 1 :(得分:28)
now append是JavaScript中的一种方法
MDN documentation on append method
引用MDN
ParentNode.append
方法在DOMString
的最后一个子项之后插入一组Node对象或ParentNode
个对象。DOMString
个对象作为等效的Text节点插入。
IE和Edge不支持此功能,但Chrome(54 +),Firefox(49 +)和Opera(39 +)支持。
JavaScript的追加类似于jQuery的追加。
您可以传递多个参数。
var elm = document.getElementById('div1');
elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div'));
console.log(elm.innerHTML);
<div id="div1"></div>
答案 2 :(得分:15)
append
是一种将一些内容或HTML附加到元素的jQuery方法。
$('#example').append('Some text or HTML');
appendChild
是一个用于添加子元素的纯DOM方法。
document.getElementById('example').appendChild(newElement);
答案 3 :(得分:7)
我知道这是一个陈旧且回答的问题,我不是在寻找选票,我只想添加一些额外的小东西,我认为这可能有助于新人。
是appendChild
是DOM
方法,append
是JQuery方法,但实际上关键区别是appendChild
将节点作为参数,我的意思是想要在DOM中添加一个空段落,您需要先创建p
元素
var p = document.createElement('p')
然后你可以将它添加到DOM中,而JQuery append
为你创建该节点并立即将它添加到DOM中,无论它是文本元素还是html元素
或者组合!
$('p').append('<span> I have been appended </span>');
答案 4 :(得分:5)
答案 5 :(得分:0)
appendChild
是纯粹的 javascript 方法,其中append
是 jQuery 方法。
答案 6 :(得分:0)
JavaScript appendchild方法可用于将项目附加到另一个元素。 jQuery Append元素执行相同的工作,但肯定会减少行数:
让我们以一个示例来添加列表中的项目:
a)使用JavaScript
var n= document.createElement("LI"); // Create a <li> node
var tn = document.createTextNode("JavaScript"); // Create a text node
n.appendChild(tn); // Append the text to <li>
document.getElementById("myList").appendChild(n);
b)使用jQuery
$("#myList").append("<li>jQuery</li>")