Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery append() vs appendChild()

Here's some sample code:

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> 

What is the difference between append() and appendChild()?
Any real time scenarios?

like image 937
user2067567 Avatar asked Apr 10 '13 12:04

user2067567


People also ask

Should I use append or appendChild?

Difference between appendChild() and append()append() also allows you to append DOMString objects, and it has no return value. Further, parentNode. appendchild() allows you to append only one node, while parentNode. append() supports multiple arguments - so you can append several nodes and strings.

What is difference between append and appendTo in jQuery?

What is the difference between append() and appendTo() in jQuery? The append (content) method appends content to the inside of every matched element, whereas the appendTo (selector) method appends all of the matched elements to another, specified, set of elements.

What is the difference between the append () and after () methods in jQuery?

. append() adds the parameter element inside the selector element's tag at the very end whereas the . after() adds the parameter element after the element's tag.

What is append in jQuery?

jQuery append() Method The append() method inserts specified content at the end of the selected elements. Tip: To insert content at the beginning of the selected elements, use the prepend() method.


1 Answers

The main difference is that appendChild is a DOM method and append is a jQuery method. The second one uses the first as you can see on jQuery source code

append: function() {     return this.domManip(arguments, true, function( elem ) {         if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {             this.appendChild( elem );         }     }); }, 

If you're using jQuery library on your project, you'll be safe always using append when adding elements to the page.

like image 148
Claudio Redi Avatar answered Oct 16 '22 23:10

Claudio Redi