так что готовьтесь в основном это тогдаfunction prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Мухаммед Умер
167
Вот фрагмент, чтобы вы начали:
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перед ним.
Спасибо, почему для prepend просто используйте insertBefore без создания дополнительного div? как грумдриг ответ?
Йосеф
это создает элемент и добавляет его к домену, добавляя и добавляя работу по-другому
Андрей Кристиан Продан
Я получаю один по сравнению с ответом Grumdig в
Andrew
10
Это 2015 год. Можем ли мы иметь встроенный prepend()метод еще?
1,21 гигаватт
Node.append или node.appendChild признаются недействительными методы, использование InsertBefore (узел, нуль) вместо
Suhayb
28
Вы не дали нам много, чтобы продолжить здесь, но я думаю, что вы просто спрашиваете, как добавить контент в начало или конец элемента? Если так, то вот как вы можете сделать это довольно легко:
//get the target div you want to append/prepend tovar 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;
@Munzilla Этот метод заставит браузер снова проанализировать все существующие дочерние элементы. В приведенных выше решениях браузер просто должен прикрепить данный дочерний элемент к документу.
Саям Кази
12
Если вы хотите вставить необработанную HTML-строку независимо от ее сложности, вы можете использовать:,
insertAdjacentHTMLс соответствующим первым аргументом:
beforebegin
перед самим элементом
afterbegin
Как раз внутри элемента, перед его первым потомком.
'beforeend'
Только внутри элемента, после его последнего потомка.
'afterend'
После самого элемента.
Подсказка: вы всегда можете вызвать Element.outerHTMLHTML-строку, представляющую вставляемый элемент.
« insertAdjacentHTMLНе бережет слушателей ...» Какие слушатели? Это HTML, поэтому еще нет элементов для привязки. Если вы имели в виду существующие элементы внутри foo, то это неверное утверждение. Весь смысл в .insertAdjacentHTMLтом, что он сохраняет слушателей. Возможно, вы думаете о том .innerHTML += "...", что разрушает старые узлы DOM.
шлепает
@spanky Вы правы, что утверждение может быть интерпретировано несколькими способами, что я имел в виду, если бы недавно создавались узлы DOM insertAdjacentHTML(а не корень или существующие потомки корня)
artur grzesiak
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]);}};
Что делать, если у узла нет дочерних узлов? В этом случае firstChild будет нулевым
felixfbecker
prepend уже существует, см. ParentNode.prepend (), поэтому для создания prependChild достаточно вызвать prnt.prepend (chld)
Игорь Фоменко,
2
Вот пример использования prepend для добавления абзаца в документ.
var element = document.createElement("p");var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);
В 2017 году я знаю, что для Edge 15 и IE 12 метод prepend не включается в качестве свойства для элементов Div, но если кому-то нужна быстрая ссылка для заполнения функции, я сделал это:
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.
Ответы:
Возможно, вы спрашиваете о методах DOM
appendChild
иinsertBefore
.источник
function prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Вот фрагмент, чтобы вы начали:
theParent.firstChild
даст нам ссылку на первый элемент внутриtheParent
и поставитtheKid
перед ним.источник
prepend()
метод еще?Вы не дали нам много, чтобы продолжить здесь, но я думаю, что вы просто спрашиваете, как добавить контент в начало или конец элемента? Если так, то вот как вы можете сделать это довольно легко:
Очень легко.
источник
Если вы хотите вставить необработанную HTML-строку независимо от ее сложности, вы можете использовать:,
insertAdjacentHTML
с соответствующим первым аргументом:Подсказка: вы всегда можете вызвать
Element.outerHTML
HTML-строку, представляющую вставляемый элемент.Пример использования:
DEMO
Внимание:
insertAdjacentHTML
не сохраняет слушателей, которые были связаны с.addEventLisntener
.источник
insertAdjacentHTML
Не бережет слушателей ...» Какие слушатели? Это HTML, поэтому еще нет элементов для привязки. Если вы имели в виду существующие элементы внутриfoo
, то это неверное утверждение. Весь смысл в.insertAdjacentHTML
том, что он сохраняет слушателей. Возможно, вы думаете о том.innerHTML += "..."
, что разрушает старые узлы DOM.insertAdjacentHTML
(а не корень или существующие потомки корня)Я добавил это в свой проект, и это похоже на работу:
Пример:
источник
Чтобы упростить свою жизнь, вы можете продлить
HTMLElement
объект. Это может не сработать для старых браузеров, но определенно делает вашу жизнь проще:В следующий раз вы можете сделать это:
источник
Вот пример использования prepend для добавления абзаца в документ.
результат:
источник
В 2017 году я знаю, что для Edge 15 и IE 12 метод prepend не включается в качестве свойства для элементов Div, но если кому-то нужна быстрая ссылка для заполнения функции, я сделал это:
Простая функция стрелок, которая совместима с большинством современных браузеров.
источник
Если referenceElement имеет значение null или не определено, newElement вставляется в конец списка дочерних узлов.
Примеры можно найти здесь: Node.insertBefore
источник
Вы также можете использовать unshift (), чтобы добавить к списку
источник
Это не лучший способ сделать это, но если кто-то хочет вставить элемент раньше всего, вот способ.
источник