Як я можу реалізувати додавання та додавання за допомогою звичайного 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з відповідним першим аргументом:

'перед початком ' Перед самим елементом. 'afterbegin' Просто всередині елемента, перед його першою дитиною. "перед тим", що знаходиться всередині елемента, після останнього дочірнього елемента. 'afterend' Після самого елемента.

Підказка: завжди можна зателефонувати Element.outerHTML щоб отримати рядок HTML, що представляє елемент, який потрібно вставити.

Приклад використання:

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

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

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, але якщо комусь потрібно швидке посилання на функцію polyfill, я зробив це:

 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 є нульовим або невизначеним, 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);