Как я могу реализовать prepend и add с обычным JavaScript?

Как я могу реализовать prepend и append с обычным JavaScript без использования jQuery?

Возможно, вы спрашиваете о методах DOM appendChild и insertBefore.

parentNode.insertBefore(newChild, refChild)

Вставляет узел newChildкак дочерний по отношению parentNodeк существующему дочернему узлу refChild. (Возвращает newChild.)

Если refChildноль, newChildдобавляется в конце списка детей. Эквивалентно и более наглядно использовать parentNode.appendChild(newChild).

Вот фрагмент, чтобы вы начали:

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.firstChildдаст нам ссылку на первый элемент внутри theParentи поставит theKidперед ним.

Вы не дали нам много, чтобы продолжить здесь, но я думаю, что вы просто спрашиваете, как добавить контент в начало или конец элемента? Если так, то вот как вы можете сделать это довольно легко:

//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;

Очень легко.

Если вы хотите вставить необработанную HTML-строку независимо от ее сложности, вы можете использовать:, insertAdjacentHTMLс соответствующим первым аргументом:

beforebegin перед самим элементом afterbegin Как раз внутри элемента, перед его первым потомком. 'beforeend' Только внутри элемента, после его последнего потомка. 'afterend' После самого элемента.

Подсказка: вы всегда можете вызвать Element.outerHTMLHTML-строку, представляющую вставляемый элемент.

Пример использования:

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

DEMO

Внимание: insertAdjacentHTML не сохраняет слушателей, которые были связаны с .addEventLisntener.

Я добавил это в свой проект, и это похоже на работу:

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

Пример:

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

Чтобы упростить свою жизнь, вы можете продлить HTMLElementобъект. Это может не сработать для старых браузеров, но определенно делает вашу жизнь проще:

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

В следующий раз вы можете сделать это:

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

Вот пример использования prepend для добавления абзаца в документ.

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

результат:

<p>Example text</p>

В 2017 году я знаю, что для Edge 15 и IE 12 метод prepend не включается в качестве свойства для элементов Div, но если кому-то нужна быстрая ссылка для заполнения функции, я сделал это:

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

Простая функция стрелок, которая совместима с большинством современных браузеров.

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

Если referenceElement имеет значение null или не определено, newElement вставляется в конец списка дочерних узлов.

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.

Примеры можно найти здесь: Node.insertBefore

Вы также можете использовать unshift (), чтобы добавить к списку

Это не лучший способ сделать это, но если кто-то хочет вставить элемент раньше всего, вот способ.

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