Как вставить элемент HTML перед другими? [Дубликат]

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

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

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

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

'beforebegin' Перед самим элементом. «afterbegin» Только внутри элемента, перед его первым ребенком. 'preend' Просто внутри элемента, после его последнего ребенка. 'afterend' После самого элемента.

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

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

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

DEMO

Внимание: insertAdjacentHTML не сохраняет прослушиватели, если они прикреплены с помощью .addEventLisntener.

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

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

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

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

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

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

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

результат:

<p>Example text</p>

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

HTMLElement = typeof(HTMLElement) != 'undefiend' ? 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);

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

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

Довольно легко.

Вот фрагмент, который поможет вам:

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.

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

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