asked on

use of append vs appendChild in javascript?

I was using demo.append ( see following example for demo),when I tested the code with IE 11 , it threw an error , that read "append is not a property of object..." . So i changed it to appendChild, now it works in IE 11 as well, along with other browsers.

I read appendChild is a DOM function and append is not. does that mean we don't need javascript to use appendChild. also is it safe to use appendChild , such that it works in all browsers , to avoid such issues?

another thing, I wonder is why not just use appendChild everywhere then.

<!DOCTYPE html>
<html>
<body>

<h1>test JavaScript</h1>

<p id="demo"></p>

</body>
<script>   
    (function() {

       var demo = document.getElementById('demo'); 
       var contentDiv = document.createElement('div'); 
       contentDiv.innerHTML = "here is some content"; 
       demo.appendChild(contentDiv); 
    
    })();
    </script>
</html>

Open in new window

leakim971

https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
you've browser compatibility table at the bottom
As you can see, the first one, append, doesn't work on IE

Differences from Node.appendChild():
ParentNode.append() allows you to also append DOMString objects, whereas Node.appendChild() only accepts Node objects.
ParentNode.append() has no return value, whereas Node.appendChild() returns the appended Node object.
ParentNode.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.

mikha

ASKER

@leakim971 - thanks, I looked up the differences and see what each one do. is it safe to just replace append by appendChild as it doesn't work in IE or is there any other workaround one should consider.
I will read through the links you provided, but do you know , if appendChild is what they call a , DOM function vs another one is not?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

you can use a "polyfill" : https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append#Polyfill

// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
    arr.forEach(function (item) {
        if (item.hasOwnProperty('append')) {
            return;
        }
        Object.defineProperty(item, 'append', {
            configurable: true,
            enumerable: true,
            writable: true,
            value: function append() {
                var argArr = Array.prototype.slice.call(arguments),
                    docFrag = document.createDocumentFragment();

                argArr.forEach(function (argItem) {
                    var isNode = argItem instanceof Node;
                    docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
                });

                this.appendChild(docFrag);
            }
        });
    });
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

Open in new window

mikha

ASKER

@leakim971 - ok thanks. by safe, I meant , the appendChild should work in all browsers vs append. as append is not supported in IE11.

oh interesting, i just saw your comments about using polyfill. I am not familiar with what ployfill is , i will do some research. thanks.

leakim971

yes, you should use appendChild, it have more constraints as illustrated in previous comment
or use the polyfill if you already have a project with billions of lines of code and files

Michel Plungjan

append is yet another copy of a jQuery function, like closest. None of those work in IE without polyfills.
However jQuery has the polyfills built in, so I suggest to either use pure cross browser vanilla JS or use jQuery