Add Vs AppendChild JQuery

Question

Here is a 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?

PS: Maybe the stupid question just wants to know the exact difference

Answer 1

The main difference is that appendChild is the DOM method and append is the jQuery method. The second uses the first, as you can see in 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 use the jQuery library in your project, you will always be safe using append when adding elements to the page.

Answer 2

append is a jQuery method for adding some content or HTML to an element.

 $('#example').append('Some text or HTML'); 

appendChild is a pure DOM method for adding a child.

 document.getElementById('example').appendChild(newElement); 

Answer 3

More

now append is a method in JavaScript

MDN documentation on add method

MDN Quote

The ParentNode.append method inserts a set of Node objects or DOMString objects after the last child of the ParentNode . DOMString objects are inserted as equivalent text nodes.

This is not supported by IE and Edge, but is supported by Chrome (54+), Firefox (49+), and Opera (39+).

The JavaScript application is similar to the jQuery append.

You can pass a few arguments.

 var elm = document.getElementById('div1'); elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div')); console.log(elm.innerHTML); 

 <div id="div1"></div> 

Answer 4

appendChild is a vanilla-js DOM function.

append is a jQuery function.

Each of them has its own quirks.

Answer 5

I know this is an old and answered question, and I am not looking for a voice. I just want to add an extra trifle, which, I think, can help beginners.

yes appendChild is the DOM method and append is the JQuery method, but the key difference is that appendChild takes node as a parameter because I mean, if you want to add an empty paragraph to the DOM you need to create this p element first

var p = document.createElement('p')

then you can add it to the DOM, while the jQuery append creates a node for it and immediately adds it to the DOM, whether it is a text element or an html element or a combination!

$('p').append('<span> I have been appended </span>');

Answer 6

appendChild is a pure javascript method, where append is a jQuery method.