0

Estou tentando tornar minha aplicação WEB compatível com o Navegador Edge. Porém eu recebo a mensagem "Object doesn't support property or method 'prepend'" no console quanto eu tento executar o seguinte código:

    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);
}

Tal código funcionou no Google Chrome e Firefox

2
  • prepend não é suportado nem no IE nem no Edge. Confirme na documentação
    – Isac
    Commented 16/03/2018 às 1:42
  • Explique mais @dvd
    – Sveen
    Commented 16/03/2018 às 1:47

1 Resposta 1

4

O método prepend que indicou não é suportado no navegador Edge nem no IE.

Isso é algo que consegue confirmar na parte de compatibilidade da documentação

No entanto pode utilizar o polyfill que a própria documentação indica:

(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 para este polyfill no github

O polyfill acima indicado é o código que irá adicionar "ao navegador" ao função prepend caso ele não a suporte. Por este motivo terá de ser executado antes do código que utiliza o prepend.

2
  • @dvd O polyfill não é para adicionar um elemento é para adicionar a função prepend "ao navegador" fazendo com que prepend passe a funcionar na mesma no IE e no Edge. Note que eu não "inventei" este código. Ele está no fim da pagina de documentação no MDN linkada na minha resposta. Simplesmente coloquei aqui para acrescentar mais conteúdo relevante à resposta.
    – Isac
    Commented 16/03/2018 às 2:14
  • @dvd A vantagem de usar polyfill é que neste caso pode utilizar código JS puro e funcionar em todos os browsers, mesmo sendo uma função recente como o prepend. A única particularidade é que tem de chamar este código de polyfill uma vez no inicio de carregamento da página, o que pode até ser num arquivo incluído só com polyfills por exemplo. Logo parece na verdade pior do que é
    – Isac
    Commented 16/03/2018 às 2:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .