1class="hl-comment">// Зміна контенту
2element.textContent = class="hl-string">&#039;Новий текст&#039;;
3element.innerHTML = class="hl-string">&#039;<strong>Жирний</strong> текст&#039;;
4input.value = class="hl-string">&#039;нове значення&#039;;
5
6class="hl-comment">// Робота з класами
7element.classList.add(class="hl-string">&#039;active&#039;);
8element.classList.remove(class="hl-string">&#039;hidden&#039;);
9element.classList.toggle(class="hl-string">&#039;open&#039;);
10element.classList.contains(class="hl-string">&#039;active&#039;)  class="hl-comment">// true/false
11
12class="hl-comment">// Зміна стилів
13element.style.color = class="hl-string">&#039;red&#039;;
14element.style.display = class="hl-string">&#039;none&#039;;
15element.style.cssText = class="hl-string">&#039;color: red; font-size: 18px;&#039;;
16
17class="hl-comment">// Атрибути
18element.setAttribute(class="hl-string">&#039;disabled&#039;, class="hl-string">&#039;&#039;);
19element.removeAttribute(class="hl-string">&#039;disabled&#039;);

💡 Приклад коду

// Створення та додавання елементів
const div = document.createElement('div');
div.className = 'card';
div.textContent = 'Нова картка';
document.body.appendChild(div);
parent.insertBefore(div, referenceElement);
parent.removeChild(child);

// Сучасний метод
element.before(newEl);
element.after(newEl);
element.append(child1, child2);
element.prepend(child);
element.remove();

Вивід:

← Попередній урок Наступний урок →