JQuery Append() Vs AppendChild()

Answer :

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.

No longer

now append is a method in JavaScript

MDN documentation on append method

Quoting MDN

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 supported by Chrome(54+), Firefox(49+) and Opera(39+).

The JavaScript's append is similar to jQuery's append.

You can pass multiple 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>

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

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

appendChild is a pure DOM method for adding a child element.

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

Bagikan Artikel ini