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-розмітки.

правити

Порада

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

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

Порада

етельно вибирайте позицію вставки тексту за допомогою аргументу position. Використовуйте 'beforebegin' для вставки тексту перед елементом, 'afterbegin' - на початку вмісту елемента, 'beforeend' - в кінець вмісту елемента, та 'afterend' - після елемента. Це дозволить точно контролювати розташування нового тексту відносно існуючої структури DOM.

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

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

Порада

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

const newElement = document.createElement('div');
newElement.textContent = 'Великий обсяг тексту';
const container = document.getElementById('container');
container.appendChild(newElement);

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

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

Синтаксис

insertAdjacentText(where, data)

Параметри

where

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

автор: Bond

правити

data

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

автор: Bond

правити

Повернення

none

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	48	4	≤12.1	17	5*

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

Переглядач
	2.2	18	48	4

Приклади

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

<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>

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

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