Как добавить текст в html через js

Вставка текста и html-кода в элементы страницы — Методы innerHTML, textContent и insertAdjacentHTML

Если Вы научились манипулировать положением элементов на странице (см. заметки «Действия с элементами — . «), то дальше нужно знать, как добавить текст или HTML-код непосредственно в элементы?

Работая с примером 2.1 из прошлой статьи, мы имели дело с простым элементом , у которого есть оболочка — это тег div и какое-то оформление — это класс black . Больше ничего этот элемент не содержит.

Здесь мы продолжим работать с тегом div — будем его редактировать. Допустим нам нужно вписать в него какой-то текст. Как это сделать?

Для этого существует два метода: innerHTML и textContent. А также метод insertAdjacentHTML, который позволяет вставить текст или код в любое место страницы .

Метод innerHTML — Вставка текста

Метод innerHTML позволяет вставить текст.

'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем в конец body тег div document.body.append(div); // Вставка текста в тег div div.innerHTML = "Hello world"; 

Результат в Браузере

В тег div добавили текст Hello world .

Метод innerHTML — Вставка HTML-кода

Метод innerHTML позволяет вставить HTML-код.

Продолжим работать с предыдущим примером.

'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка кода div.innerHTML = "
Hello world
"; 

Результат в Браузере

Текст Hello world заключили в заголовок h1 («Hello world» теперь не умещается в область тега div) .

Метод textContent — Вставка текста

Метод textContent позволяет вставить текст.

'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка текста в тег div div.textContent = "textContent"; 

Результат в Браузере

В отличии от метода innerHTML — метод textContent работает только с текстом .

Если при помощи метода textContent пробовать вставить код, то он будет преобразован в строку.

Метод insertAdjacentHTML

Напоследок ответим на вопрос, как вставить HTML-код перед или после определенных тегов? Для этого существует метод insertAdjacentHTML.

Метод insertAdjacentHTML позволяет вставить HTML-код в любое место страницы.

Синтаксис метода insertAdjacentHTML

Сначала указывается элемент, относительно которого проводятся действия, и который называется опорным элементом.

опорный элемент.insertAdjacentHTML( «ключевое слово» , «код» );

Метод insertAdjacentHTML принимает два аргумента : первый — это одно из ключевых слов: afterbegin, afterend, beforebegin или beforeend. Второй аргумент метода insertAdjacentHTML — это HTML-код, который мы хотим вставить.

'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем к div стили div.style.cssText = 'width: 250px; height: 110px'; // Добавляем в конец body тег div document.body.append(div); // Вставка HTML-кода в начало и в конец элемента div.insertAdjacentHTML("afterbegin", '
afterbegin - В начало элемента
'); div.insertAdjacentHTML("beforeend", '
beforeend - В конец элемента
'); // Вставка HTML-кода после и перед элементом div.insertAdjacentHTML("afterend", '
afterend - После элемента
'); div.insertAdjacentHTML("beforebegin", '
beforebegin - Перед элементом
'); 

Результат в Браузере

Результат в консоли

beforebegin - Перед элементом
 
afterbegin - В начало элемента
 
beforeend - В конец элемента
 
 
afterend - После элемента
 

Вот так при помощи метода insertAdjacentHTML происходит вставка HTML-кода в любое место страницы относительно опорного элемента.

Как добавить элемент в html через js

Добавить элемент в html через js можно с помощью метода document.createElement() . Предположим, что у нас есть следующий html документ:

 class="container">

// получаем контейнер const container = document.querySelector('.container'); // создаем новый элемент - заголовок первого уровня const h1 = document.createElement('h1'); // добавляем класс .red, в котором указан нужный нам цвет текста h1.classList.add('red'); // добавляем нужный текст h1.textContent = 'Hello, World!'; // кладем заголовок в контейнер container.append(h1); 

Здесь могла быть ваша реклама.

let paragraph = document.querySelector('p'); paragraph.textContent = 'Здесь был Кекс. Мяу!';

Здесь был Кекс. Мяу!