Object does not support property or method 'prepend'

1

I'm trying to make my WEB application compatible with the Edge Browser. But I get the message "Object does not support property or method 'prepend'" in the console as I try to execute the following code:

    var li = document.createElement("li");
 ...
    var list = document.getElementById("history");
    if (this.stackHistory.size() === 0) {
        list.innerHTML = "";
        list.appendChild(li);
    } else {
        if (document.getElementById("historyorder").value === "last")
           list.prepend(li); //ERROR AQUI
        else
           list.appendChild(li);
}

This code worked in Google Chrome and Firefox

    
asked by anonymous 16.03.2018 / 02:30

1 answer

4

The prepend method you indicated is not supported in the Edge browser nor in IE.

This is something you can confirm in the compatibility part of the documentation

However, you can use the polyfill that the documentation itself states:

(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('prepend')) {
      return;
    }
    Object.defineProperty(item, 'prepend', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function prepend() {
        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.insertBefore(docFrag, this.firstChild);
      }
    });
  });
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

Link to this polyfill in github

The above polyfill is the code that will add "to the browser" to the prepend function if it does not support it. For this reason, it must be executed before the code that uses prepend .

    
16.03.2018 / 02:46