Javascript вставить элемент после

Метод insertAdjacentElement

Метод insertAdjacentElement позволяет вставить элемент в любое место страницы. Чаще всего используется после создания элемента с помощью createElement . Код вставляется относительно опорного элемента. Можно сделать вставку перед опорным элементом (способ вставки beforeBegin ), после него (способ вставки afterEnd ), а также в начало (способ вставки afterBegin ) или в конец (способ вставки beforeEnd ) опорного элемента.

Синтаксис

Пример . Способ beforeBegin

Пусть опорный элемент — это элемент #target . Вставим перед ним новый абзац:

let p = document.createElement(‘p’); p.textContent = ‘!’; let target = document.querySelector(‘#target’); target.insertAdjacentElement(‘beforeBegin’, p);

Результат выполнения кода:

Пример . Способ afterEnd

А теперь вставим новый абзац после опорного элемента:

let p = document.createElement(‘p’); p.textContent = ‘!’; let target = document.querySelector(‘#target’); target.insertAdjacentElement(‘afterEnd’, p);

Результат выполнения кода:

Пример . Способ afterBegin

Вставим новый абзац в начало опорного элемента:

let p = document.createElement(‘p’); p.textContent = ‘!’; let target = document.querySelector(‘#target’); target.insertAdjacentElement(‘afterBegin’, p);

Результат выполнения кода:

Пример . Способ beforeEnd

Вставим новый абзац в конец опорного элемента:

let p = document.createElement(‘p’); p.textContent = ‘!’; let target = document.querySelector(‘#target’); target.insertAdjacentElement(‘beforeEnd’, p);

Результат выполнения кода:

Смотрите также

• метод insertAdjacentHTML ,
  который вставляет теги в заданное место
• метод insertAdjacentText ,
  который вставляет текст в заданное место
• метод prepend ,
  который вставляет элементы в начало
• метод append ,
  который вставляет элементы в конец
• метод appendChild ,
  который вставляет элементы в конец родителя
• метод insertBefore ,
  который вставляет элементы перед элементом

Источник

Element.insertAdjacentElement()

Метод insertAdjacentElement() добавляет переданный элемент в DOM-дерево относительно элемента, вызвавшего метод.

Синтаксис

targetElement.insertAdjacentElement(position, element);

Параметры

DOMString — определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):

• ‘beforebegin’ : перед самим элементом targetElement .
• ‘afterbegin’ : внутри элемента targetElement , перед его первым потомком.
• ‘beforeend’ : внутри элемента targetElement , после его последнего потомка.
• ‘afterend’ : после самого элемента targetElement .

Элемент, добавляемый в DOM-дерево.

Возвращаемое значение

Метод возвращает добавляемый элемент, либо null , если добавление элемента завершилось ошибкой.

Исключения

Исключение	Пояснение
SyntaxError	Переданное значение position не соответствует ни одному из допустимых.
TypeError	Передаваемый element не является валидным.

Наглядное отображение параметра position

Примечание: значения beforebegin и afterend работают только если targetElement находится в DOM-дереве и имеет родительский элемент.

Примеры

.addEventListener('click', function()  var tempDiv = document.createElement('div'); tempDiv.style.backgroundColor = randomColor(); if (activeElem)  activeElem.insertAdjacentElement('beforebegin',tempDiv); > setListener(tempDiv); >); afterBtn.addEventListener('click', function()  var tempDiv = document.createElement('div'); tempDiv.style.backgroundColor = randomColor(); if (activeElem)  activeElem.insertAdjacentElement('afterend',tempDiv); > setListener(tempDiv); >); 

Спецификация

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Element: after() method

The Element.after() method inserts a set of Node or string objects in the children list of the Element ‘s parent, just after the Element . String objects are inserted as equivalent Text nodes.

Syntax

after(node1) after(node1, node2) after(node1, node2, /* … ,*/ nodeN) 

Parameters

A set of Node or string objects to insert.

Return value

Exceptions

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples

Inserting an element

let container = document.createElement("div"); let p = document.createElement("p"); container.appendChild(p); let span = document.createElement("span"); p.after(span); console.log(container.outerHTML); // " " 

Inserting text

let container = document.createElement("div"); let p = document.createElement("p"); container.appendChild(p); p.after("Text"); console.log(container.outerHTML); // " 
Text
" 

Inserting an element and text

let container = document.createElement("div"); let p = document.createElement("p"); container.appendChild(p); let span = document.createElement("span"); p.after(span, "Text"); console.log(container.outerHTML); // " 
Text
" 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник