Como posso implementar o prefixo e o anexo com JavaScript regular?

Como posso implementar o prefixo e o anexo com JavaScript comum sem usar o jQuery?

Talvez você esteja perguntando sobre os métodos DOM appendChild e insertBefore.

parentNode.insertBefore(newChild, refChild)

Insere o nó newChildcomo um filho parentNodeanterior ao nó filho existente refChild. (Retorna newChild.)

Se refChildfor nulo, newChildé adicionado no final da lista de filhos. Equivalentemente, e mais facilmente, use parentNode.appendChild(newChild).

Aqui está um trecho para você começar:

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChildnos dará uma referência ao primeiro elemento interno theParente será colocado theKiddiante dele.

Você não nos deu muito o que falar aqui, mas acho que você está apenas perguntando como adicionar conteúdo ao início ou ao final de um elemento? Nesse caso, veja como você pode fazer isso facilmente:

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

Bem fácil.

Se você deseja inserir uma string HTML não processada, por mais complexa que seja, pode usar:, insertAdjacentHTMLcom o primeiro argumento apropriado:

'beforebegin' Antes do próprio elemento. 'afterbegin' Logo dentro do elemento, antes de seu primeiro filho. 'beforeend' Apenas dentro do elemento, após seu último filho. 'afterend' Após o próprio elemento.

Dica: você sempre pode ligar Element.outerHTMLpara obter a string HTML que representa o elemento a ser inserido.

Um exemplo de uso:

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DEMO

Cuidado: insertAdjacentHTML não preserva os ouvintes que foram anexados .addEventLisntener.

Eu adicionei isso no meu projeto e parece funcionar:

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

Exemplo:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

Para simplificar sua vida, você pode estender o HTMLElementobjeto. Pode não funcionar para navegadores mais antigos, mas definitivamente facilita sua vida:

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

Então da próxima vez você pode fazer isso:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

Aqui está um exemplo do uso de prefpend para adicionar um parágrafo ao documento.

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

resultado:

<p>Example text</p>

Em 2017, eu sei que para o Edge 15 e o IE 12, o método prepend não está incluído como uma propriedade dos elementos Div, mas se alguém precisar de uma referência rápida para polifill uma função, eu fiz isso:

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

Função simples de seta compatível com os navegadores mais modernos.

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

Se referenceElement for nulo ou indefinido, newElement será inserido no final da lista de nós filhos.

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

Exemplos podem ser encontrados aqui: Node.insertBefore

Você também pode usar unshift () para adicionar uma lista antes

Essa não é a melhor maneira de fazer isso, mas se alguém quiser inserir um elemento antes de tudo, aqui está uma maneira.

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);