Внесення змін в документ

Модифікації DOM є ключем до створення “живих” сторінок.

Тут ми побачимо, як створювати нові елементи “на льоту” та змінювати ті, що вже існують.

Приклад: показати повідомлення

Розглянемо на прикладі. Ми додамо на сторінку повідомлення яке виглядатиме краще аніж alert.

Ось так воно виглядатиме:

          <style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert">
  <strong>Привіт!</strong> Ви прочитали важливе повідомлення.
</div>
        

          
        

Це був приклад HTML розмітки. Тепер створимо такий самий div за допомогою JavaScript (припускаємо, що стилі вже є в HTML або в окремому CSS-файлі).

Створення елементу

Є два способи створення DOM вузлів:

document.createElement(tag)

Створює новий елемент з заданим тегом:

let div = document.createElement('div');

document.createTextNode(text)

Створює новий текстовий вузол з заданим текстом:

let textNode = document.createTextNode('От і я');

У більшості випадків нам потрібно створювати саме елементи, такі як div для повідомлень.

Створення повідомлення

Створення div елементу для повідомлення складається з трьох кроків:

          // 1. Створюємо елемент <div>
let div = document.createElement('div');

// 2. Задаємо йому клас "alert"
div.className = "alert";

// 3. Наповнюємо його змістом
div.innerHTML = "<strong>Всім привіт!</strong> Ви прочитали важливе повідомлення.";
        

Ми створили елемент, але поки що він знаходиться лише у змінній з назвою div, тому не можемо бачити його на сторінці, оскільки він не є частиною документа.

Методи вставки

Щоб div з’явився нам потрібно вставити його десь в document. Наприклад, в елемент <body> який можна отримати звернувшись до document.body.

Для цього існує спеціальний метод append: document.body.append(div).

Ось повний код:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>Всім привіт!</strong> Ви прочитали важливе повідомлення.";

  document.body.append(div);
</script>