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

Question

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

Answer 1

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

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 перед ним.

Answer 2

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

parentNode.insertBefore(newChild, refChild)

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

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

Answer 3

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

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

Довольно просто.

Answer 4

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

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

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

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

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

DEMO

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

Answer 5

Чтобы упростить свою жизнь, вы можете расширить объект 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);

Answer 6

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

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

Answer 7

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

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

результат:

<p>Example text</p>

Answer 8

В 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()) } }

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

Answer 9

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

Answer 10

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

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