insertAdjacentHTML() — вставити HTML поруч з елементом

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

insertAdjacentHTML() - це метод об'єкту Element в JavaScript, який дозволяє вставляти HTML-вміст у вигляді рядка відносно поточного елементу. Цей метод є корисним при динамічному створенні та вставці HTML-вмісту на веб-сторінку, оскільки він забезпечує більший контроль над позицією вставки порівняно з властивістю innerHTML.

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

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

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

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

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

const parent = document.getElementById('parent');

// Вставляє HTML-вміст перед поточним елементом
parent.insertAdjacentHTML('beforebegin', '<span>Новий елемент</span>');

// Вставляє HTML-вміст після поточного елементу
parent.insertAdjacentHTML('afterend', '<span>Ще один новий елемент</span>');

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

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

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

const parent = document.getElementById('parent');

// Вставляє HTML-вміст як перший дочірній вміст
parent.insertAdjacentHTML('afterbegin', '<div>Новий дочірній вміст</div>');

// Вставляє HTML-вміст як останній дочірній вміст
parent.insertAdjacentHTML('beforeend', '<div>Ще один новий дочірній вміст</div>');

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

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

Слід бути обережним при використанні insertAdjacentHTML() з даними, введеними користувачем, оскільки вставлений HTML-код буде інтерпретовано браузером. Це може призвести до ризиків безпеки, таких як Cross-Site Scripting (XSS) атаки. Для безпечного введення користувачем рекомендується належним чином обробляти вхідні дані перед вставкою в DOM.

правити

Порада

Будьте обережні при використанні insertAdjacentHTML() з даними, введеними користувачем, оскільки вставлений HTML-код буде інтерпретовано браузером. Для безпечного введення користувачем рекомендується належним чином обробляти вхідні дані перед вставкою в DOM.

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

Порада

Якщо потрібно вставити великий обсяг HTML-вмісту, використовуйте insertAdjacentHTML() замість innerHTML для кращої продуктивності, оскільки при використанні insertAdjacentHTML() браузеру не потрібно повторно розбирати та перебудовувати весь вміст елементу.

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

Порада

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

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

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

Синтаксис

insertAdjacentHTML(position, text)

Параметри

position

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

автор: Bond

правити

text

Рядок, який буде розібраний як HTML або XML і вставлений у дерево.

автор: Bond

правити

Повернення

none

Повертає значення undefined.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	8	4	8	17	4*

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

Переглядач
	4.4	18	8	4

Приклади

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

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

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

// Вставляємо HTML-розмітку після цільового елемента
const newHTML = '<div>Новий елемент</div>';
targetElement.insertAdjacentHTML('afterend', newHTML);

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

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

// Функція для додавання нового елемента
function addItem(position) {
  const newItem = `<li>${itemInput.value.trim()}</li>`;

  if (position === 'beforebegin') {
    itemList.insertAdjacentHTML(position, newItem);
  } else {
    const targetItem = itemList.querySelector(`li:nth-child(${position})`);
    targetItem.insertAdjacentHTML('beforebegin', newItem);
  }

  itemInput.value = '';
}

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

<header>
  <h2 class="title">Element: insertAdjacentHTML()</h2>
  <p class="description">Вставляє вказаний текст у вигляді HTML у позицію, відносну до елемента, на якому викликається метод.</p>
</header>
<main>
  <div class="result">
    <div id="container">
      <h3>Список покупок</h3>
      <ul id="shoppingList">
        <li>Хліб</li>
        <li>Молоко</li>
      </ul>
    </div>
    <input type="text" id="newItem" placeholder="Введіть новий елемент списку">
    <button onclick="addItem()">Додати</button>
    <button onclick="clearList()">Очистити список</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#container {
  margin-bottom: 10px;
}

function addItem() {
  const newItem = document.getElementById('newItem').value.trim();
  if (newItem) {
    const listItem = document.createElement('li');
    listItem.textContent = newItem;
    const shoppingList = document.getElementById('shoppingList');
    shoppingList.insertAdjacentHTML('beforeend', `<li>${newItem}</li>`);
    document.getElementById('newItem').value = '';
  }
}

function clearList() {
  const shoppingList = document.getElementById('shoppingList');
  shoppingList.innerHTML = '';
}
//# sourceURL=pen.js