JS метод Element.insertAdjacentElement()

Загальний опис

insertAdjacentElement() - це метод об'єкту Element в JavaScript, який дозволяє вставляти вказаний елемент відносно поточного елементу. Цей метод є корисним при динамічній маніпуляції з DOM (Document Object Model) та вставці нових елементів на веб-сторінку. Він надає більший контроль над позицією вставки порівняно з іншими методами, такими як appendChild() або insertBefore().

Метод insertAdjacentElement() приймає два аргументи: перший - рядок, який визначає позицію вставки відносно поточного елементу, а другий - елемент, який потрібно вставити. Можливі значення для позиції вставки:

• 'beforebegin' - вставляє елемент безпосередньо перед поточним елементом.
• 'afterbegin' - вставляє елемент як перший дочірній елемент поточного елементу.
• 'beforeend' - вставляє елемент як останній дочірній елемент поточного елементу.
• 'afterend' - вставляє елемент безпосередньо після поточного елементу.

Наприклад, припустимо, що у нас є такий HTML-код:

<div id="parent">
  <p>Початковий вміст</p>
</div>

Ми можемо використати insertAdjacentElement() для вставки нового елементу відносно елементу <div>:

const parent = document.getElementById('parent');
const newElement = document.createElement('span');
newElement.textContent = 'Новий елемент';

// Вставляє елемент перед поточним елементом
parent.insertAdjacentElement('beforebegin', newElement);

// Вставляє елемент після поточного елементу
parent.insertAdjacentElement('afterend', newElement.cloneNode(true));

Після виконання цього коду, HTML-структура буде такою:

<span>Новий елемент</span>
<div id="parent">
  <p>Початковий вміст</p>
</div>
<span>Новий елемент</span>

Метод insertAdjacentElement() також корисний при вставці елементів всередину інших елементів. Наприклад:

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'Новий дочірній елемент';

// Вставляє елемент як перший дочірній елемент
parent.insertAdjacentElement('afterbegin', newElement);

// Вставляє елемент як останній дочірній елемент
parent.insertAdjacentElement('beforeend', newElement.cloneNode(true));

Після виконання цього коду, HTML-структура буде такою:

<div id="parent">
  <div>Новий дочірній елемент</div>
  <p>Початковий вміст</p>
  <div>Новий дочірній елемент</div>
</div>

Загалом, insertAdjacentElement() є потужним інструментом для динамічної вставки елементів на веб-сторінку. Він надає більше гнучкості та контролю над позицією вставки порівняно з іншими методами маніпуляції DOM.

правити

Порада

Якщо потрібно вставити кілька елементів в одну позицію, використовуй цикл або створюй фрагмент документа за допомогою document.createDocumentFragment() для кращої продуктивності.

автор: Bond правити

Порада

Пам'ятай, що insertAdjacentElement() вставляє елемент як вузол DOM, тому перед використанням потрібно створити екземпляр Element за допомогою document.createElement() або отримати існуючий вузол.

автор: Bond правити

Порада

Для досвідчених розробників: при роботі з великими об'ємами даних або частими оновленнями вмісту, використання insertAdjacentElement() може призвести до зниження продуктивності. У таких випадках розгляньте можливість використання більш ефективних методів маніпуляції DOM, таких як appendChild(), insertBefore() або бібліотек для роботи з DOM, наприклад, React або Vue.js.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

insertAdjacentElement(position, element)

Параметри

position

Рядок, що представляє позицію відносно цільового елемента.

автор: Bond

правити

element

Елемент, який потрібно вставити у дерево.

автор: Bond

правити

Повернення

element

Повертає вставлений елемент або null у разі невдачі вставки.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	48	3	8	17	5*

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	48	1

Приклади

+ запропонувати свій приклад у пісочниці

<ul id="productList">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>
<input type="text" id="productInput" value="текст для прикладу" placeholder="Введи щось">
<button id="addBeforeBtn">Додати</button>
<button id="addAfterBtn">Додати</button>
<button id="addAfterPositionBtn">Додати</button>

// Отримуємо посилання на список та поле введення
const productList = document.getElementById('productList');
const productInput = document.getElementById('productInput');

// Функція для додавання нового товару
function addProduct(position) {
  const newProduct = document.createElement('li');
  newProduct.textContent = productInput.value.trim();

  if (position === 'beforebegin') {
    productList.insertAdjacentElement(position, newProduct);
  } else {
    const targetProduct = productList.querySelector(`li:nth-child(${position})`);
    targetProduct.insertAdjacentElement('beforebegin', newProduct);
  }

  productInput.value = '';
}

// Додаємо обробники подій для кнопок
document.getElementById('addBeforeBtn').addEventListener('click', () => addProduct('beforebegin'));
document.getElementById('addAfterBtn').addEventListener('click', () => addProduct(1));
document.getElementById('addAfterPositionBtn').addEventListener('click', () => {
  const position = parseInt(prompt('Введіть позицію для вставки (1, 2, 3, ...)'), 10);
  addProduct(position);
});

<div id="target">Демонстраційний елемент</div>

// Отримуємо посилання на вихідний елемент
const targetElement = document.getElementById('target');

// Створюємо новий елемент
const newElement = document.createElement('div');
newElement.textContent = 'Новий елемент';

// Вставляємо новий елемент перед вихідним елементом
targetElement.insertAdjacentElement('beforebegin', newElement);