Как я могу реализовать preend и добавлять с помощью обычного JavaScript?

Ответ 1

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

parentNode.insertBefore(newChild, refChild)

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

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

Ответ 2

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

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

Ответ 3

добавить без JQuery:

parent.insertBefore(child, parent.firstChild);

Обновление

Chrome, Firefox и Safari (WebKit) поддерживает prepend.

parentNode.prepend(child);

Ответ 4

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

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

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

Ответ 5

Если вы хотите вставить необработанную строку 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.

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

результат:

<p>Example text</p>

Ответ 9

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

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

Ответ 10

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

Если referenceElement имеет значение null или undefined, в конце списка дочерних узлов вставлен 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

Ответ 11

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

Ответ 12

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

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

Ответ 13

var para = document.createElement("p");
para.innerHTML = "Some Text" ;
document.getElementById("#print-list").appendChild(para)