JS метод Element.insertAdjacentText()

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

insertAdjacentText() - це метод інтерфейсу Element в JavaScript, який дозволяє вставляти текстовий вміст відносно заданого елемента. Цей метод корисний для динамічного маніпулювання вмістом веб-сторінки без необхідності повного перезавантаження. Він широко використовується для додавання або змінення тексту в різних частинах DOM-дерева, забезпечуючи гнучкий та ефективний спосіб оновлення контенту.

Синтаксис методу insertAdjacentText() виглядає наступним чином:

element.insertAdjacentText(position, text)

Він приймає два аргументи:

1. position - рядок, що визначає, де потрібно вставити текст відносно елемента. Можливі значення: 'beforebegin', 'afterbegin', 'beforeend' або 'afterend'.
2. text - рядок, який потрібно вставити.

Розглянемо детальніше кожну з позицій:

1. 'beforebegin' - вставляє текст безпосередньо перед елементом.

   const element = document.getElementById('myElement');
   element.insertAdjacentText('beforebegin', 'Текст перед елементом');
   

2. 'afterbegin' - вставляє текст всередину елемента, на початку його вмісту.

   const element = document.getElementById('myElement');
   element.insertAdjacentText('afterbegin', 'Текст на початку елемента');
   

3. 'beforeend' - вставляє текст всередину елемента, в кінці його вмісту.

   const element = document.getElementById('myElement');
   element.insertAdjacentText('beforeend', 'Текст в кінці елемента');
   

4. 'afterend' - вставляє текст безпосередньо після елемента.

   const element = document.getElementById('myElement');
   element.insertAdjacentText('afterend', 'Текст після елемента');
   

Цей метод можна використовувати для різноманітних цілей, наприклад, для додавання нових елементів в DOM-дерево, оновлення вмісту існуючих елементів або вставки тексту в певні місця сторінки. Він забезпечує більшу гнучкість та контроль над змінами вмісту, ніж просте присвоєння значення властивості innerHTML або textContent.

Важливо пам'ятати, що insertAdjacentText() вставляє текст як звичайний текстовий вміст, без інтерпретації HTML-розмітки. Якщо потрібно вставити HTML-код, слід використовувати метод insertAdjacentHTML().

Наприклад, якщо ви маєте елемент <div id="myDiv"></div> і хочете додати в нього абзац тексту, можете використати наступний код:

const myDiv = document.getElementById('myDiv');
myDiv.insertAdjacentText('beforeend', '<p>Це новий абзац тексту.</p>');

У цьому випадку, в елемент myDiv буде вставлений текст <p>Це новий абзац тексту.</p> як звичайний текстовий вміст, без інтерпретації HTML-розмітки.

Синтаксис

insertAdjacentText(where, data)

Параметри

*where

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

*data

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

Return

none

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

<div id="container">Початковий текст</div>
<button onclick="addText()">Додати текст</button>

<script>
function addText() {
  const container = document.getElementById('container');
  container.insertAdjacentText('afterend', ' Додатковий текст.');
}
</script>

<div id="calculator">
  <input type="number" id="num1" placeholder="Перше число">
  <input type="number" id="num2" placeholder="Друге число">
  <select id="operation">
    <option value="add">Додавання</option>
    <option value="subtract">Віднімання</option>
    <option value="multiply">Множення</option>
    <option value="divide">Ділення</option>
  </select>
  <button onclick="calculate()">Обчислити</button>
  <div id="result"></div>
</div>

<script>
function calculate() {
  const num1 = parseFloat(document.getElementById('num1').value);
  const num2 = parseFloat(document.getElementById('num2').value);
  const operation = document.getElementById('operation').value;
  let result;

  switch (operation) {
    case 'add':
      result = num1 + num2;
      break;
    case 'subtract':
      result = num1 - num2;
      break;
    case 'multiply':
      result = num1 * num2;
      break;
    case 'divide':
      result = num1 / num2;
      break;
    default:
      result = 'Невідома операція';
  }

  const resultDiv = document.getElementById('result');
  resultDiv.insertAdjacentText('beforebegin', `Результат: ${result}`);
}
</script>