Получение и установка контента элементам в JavaScript

На этом уроке мы рассмотрим свойства, предназначенные для работы с текстовым содержимым элемента (textContent
, innerText
, outerText
) и свойства, предназначенные для работы с HTML содержимым элемента (innerHTML
, outerHTML
).
Свойство textContent и как оно работает
textContent
– это свойство, которое предназначено для работы с текстовым контентом элемента. Оно позволяет его как получить (включая текстовое содержимое всего его потомков), так и установить.
Синтаксис:
// $elem – некоторый DOM-элемент // получим текстовый контент $elem const text = $elem.textContent; // установим текстовый контент $elem: $elem.textContent = 'Некоторый текст...';
Примеры с textContent
1. При получении текста элемента, содержащего один текстовый узел, textContent
возвратит текст, находящийся внутри этого текстового узла.
Пример:

<p id="some-paragraph">Некоторый текст</p> <script> const $elem = document.querySelector('#some-paragraph'); const text = $elem.textContent; // "Некоторый текст" </script>
2. Для элемента, который содержит множество других узлов, textContent
вернёт конкатенацию (сложение) текстов всех его текстовых узлов.
Пример:

<div id="message">Внимание! <span>Это <strong>очень важный текст.</strong></span><script>alert('А это очень важное сообщение!');</script></div> <script> const $elem = document.querySelector('#message'); const text = $elem.textContent; // "Внимание! Это очень важный текст.alert('А это очень важное сообщение!');" </script>
В этом примере текстовые узлы обозначены цифрами. textContent
вернёт сложение текстов этих текстовых узлов.
3. При получении textContent
у document
, оно возвратит null
:
const text = document.textContent; // null
При установке элементу текстового содержимого, textContent
удалит всего его узлы (при их наличии), и добавит в него один текстовый узел, содержащий указанный текст.
4. Например, установим элементу #message
новое текстовое содержимое:
<!-- HTML --> <div id="message">Внимание! <p>Это <strong>очень важный текст.</strong></p><script>alert('А это очень важное сообщение!');</script></div> <script> const $elem = document.querySelector('#message'); // эта строчка удалит все элементы в #message и добавит в него текстовый узел с текстом "Новый текст..." $elem.textContent = 'Новый текст...'; </script>
После установки $elem
текстового контента, он будет выглядеть следующим образом:

5. Например, создадим элемент «div.alert
», вставим в него некоторый текст и добавим его на страницу перед закрывающим тегом body
:
// создадим элемент <div></div> const $alert = document.createElement('div'); // добавим к $alert класс alert $alert.className = 'alert'; // установим $alert текстовый контент $alert.textContent = 'Некоторый текст...'; // вставим на страницу перед </body> document.body.appendChild($alert);
6. Если присвоить textContent
строку, содержащую HTML код, то символы <
и >
будут заменены соответственно на <
и >
.
$elem.textContent = '<p>...</p>'; const text = $elem.textContent; // "<p>...</p>"
innerText, outerText и их отличие от textContent
innerText
также как textContent
используется для извлечения текста из элементов.
Но innerText
в отличие от textContent
как бы копирует текст, отображаемый этим элементом в браузере. Он учитывает стили, применённые к элементу (отображается элемент или нет). Когда элемент скрыт, innerText
не включает его текстовый контент в возвращаемые данные.
Кроме этого, innerText
не добавляет в возвращаемый результат содержимое style
и script
.
При установке элементу текстового контента, innerText
также как textContent
удаляет все имеющиеся в нём узлы и создаёт новый текстовый узел с указанным содержимым.
Синтаксис свойства innerText
:
// получим текстовый контент $elem const text = $elem.innerText; // зададим $elem текстовый контент $elem.innerText = 'Новый текст...';
Пример, в котором показана разница между innerText
и textContent
:
<div id="message">Внимание! <span>Это <strong>очень важный текст.</strong></span><script>alert('А это очень важное сообщение!');</script></div> <script> const $elem = document.querySelector('#message'); const textByTextContent = $elem.textContent; // "Внимание! Это очень важный текст.alert('А это очень важное сообщение!');" const textByInnerText = $elem.innerText; // "Внимание! Это очень важный текст." </script>
Из примера видно, что innerText
не включает в возвращаемые данные контент элемента script
.
В этом примере мы ещё дополнительно удалим отображение элемента span
из документа, т.е. установим ему «display: none
»:
<style> /* CSS */ #message > span { display: none; } </style> <div id="message">Внимание! <span>Это <strong>очень важный текст.</strong></span><script>alert('А это очень важное сообщение!');</script></div> <script> const $elem = document.querySelector('#message'); const textByTextContent = $elem.textContent; // "Внимание! Это очень важный текст.alert('А это очень важное сообщение!');" const textByInnerText = $elem.innerText; // "Внимание!" </script>
Таким образом innerText
учитывает стили элементов, и возвращает только текст отображаемый этим элементом в браузере.

outerText
Ещё в DOM API у элементов имеется свойство outerText
. Оно возвращает текстовое содержимое элемента аналогично свойству innerText
.
Синтаксис свойства outerText
:
// получим текстовый контент $elem const text = $elem.outerText; // установим $elem текстовый контент $elem.outerText = 'Текстовый контент...';
Его отличие от innerText
только в том, что outerText
при установки элементу текстового контента удаляет не только всё его содержимое, но и сам этот элемент и помещает на этом месте новый текстовый узел с заданным текстом.
Например, заменим все элементы img
на текст 'Здесь было изображение'
:
<div class="container"> <div>...</div> <img src="image-01.png" alt="..."> <div>...</div> <img src="image-02.png" alt="..."> </div> <script> // получим все элементы с тегом img const $elem = document.querySelectorAll('img'); // переберём все найденные элементы $elem.forEach(($item) => { // заменим элемент на текст $item.outerText = 'Здесь было изображение'; }); </script>
innerHTML и outerHTML
innerHTML
предназначен для установки или получения HTML разметки элемента.
Синтаксис:
// получим HTML содержимое $elem const html = $elem.innerHTML; // установим $elem новый HTML $elem.innerHTML = '<div>...<div>';
Например, установим элементу ul#list
новое HTML содержимое:
// получим HTML элемент ul по его id const $elem = document.querySelector('#list'); // установим $elem новый HTML $elem.innerHTML = `<li>HTML</li><li>CSS</li><li>JavaScript</li>`;
Пример, в котором получим HTML разметку некоторого элемента:
<div class="message">Я люблю <strong>JavaScript</strong>! Он позволяет <span>сделать что угодно со страницей</span>.</div> <script> // получим HTML элемент .message const $elem = document.querySelector('.message'); // получим HTML код $elem const html = $elem.innerHTML; </script>
Задание HTML содержимого элементу с помощью innerHTML
всегда сопровождается удалением его контента и установкой ему новой HTML разметки, но основе указанной строки, которая была разобрана внутренним парсером браузера как HTML.
Начинающие веб-разработчики при написании такого кода полагают что он добавит только указанную HTML разметку в конец содержимого $someElem
:
$someElem.innerHTML += '<div>...</div>';
Но на самом деле это не так. Этот код выполняет следующее:
- получает текущее содержимое
$someElem
, т.е. HTML-строку, к которой прибавляет ещё одну строку<div>...</div>
; - очищает всё что есть в
$someElem
; - устанавливает
$someElem
HTML, полученный в результате разбора результирующей строки.
Эквивалентная запись кода, приведённого выше:
let html = $someElem.innerHTML; html = html + '<div>...</div>'; $someElem.innerHTML = html;
Таким образом, используя такую запись мы не просто добавляем некоторый HTML в конец элемента, а полностью переустанавливаем его. Выполнение такого кода обычно сопровождается «миганием».
Поэтому, в ситуациях, когда вам нужно просто добавить некоторый фрагмент HTML разметки в некоторый элемент лучше воспользоваться, например, методом insertAdjacentHTML
.
Пример использования innerHTML
для очистки содержимого элемента:
$elem.innerHTML = '';
Например, получить и изменить HTML контент элемента р
с id="myP"
:
var myP = document.getElementById("myP"); //получить HTML содержимое элемента, имеющего id="myP" myP.innerHTML; //изменить HTML содержимое элемента, имеющего id="myP" myP.innerHTML = "<em>Что-то новое</em>";
Например, удалить HTML контент элемента p
, имеющего id="demo"
:
document.getElementById("demo").innerHTML = "";


outerHTML
Свойство outerHTML
устанавливает или возвращает HTML контент, представляющий сам элемент и его дочерние элементы.
Например, получить и изменить HTML контент списка ul
, имеющего id="myList"
:
var myList = document.getElementById("myList"); //получить HTML список myList.outerHTML; //заменить HTML список на новый myList.outerHTML = "<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>";
Задания
- Напишите сценарий, который изменит содержимое всех элементов
p
в документе. - Напишите сценарий, который заменит HTML содержимое элемента
body
на другое. Условием для запуска сценария является время, равное 5 секундам, которое прошло с момента полной загрузки страницы.
Скопировал блок в новое место при помощи:
$(".shopcategorynames").clone().appendTo(".menuvertical"); Видео проблемы: https://www.loom.com/share/880fb905aa2e48e691138bf...Сайт: https://laraves.ru/autoshop/shop/pervaya-kategoriya/
После каждого обновления страницы блок прыгает, как избавится от этого?Так делать не нужно. Лучше просто генерировать нужное содержимое на сервере. Ну или если идёт подгрузка какого-то контента с сервера, то использовать заполнители или сопровождать этот процесс какой-то анимацией.
"то использовать заполнители или сопровождать этот процесс какой-то анимацией." - а как это примерно делается, у вас есть в уроках описание такого?
Точного примера для такого случая нет. Но можно сделать, например, что-то подобное, но для загрузки конкретного блока.
ок спасибо, посмотрю
вопрос наверное банальный, но я новичок. Прошу помощи. Я вставляю в элемент строку(преобразованную из массива), состоящую из 10 пробелов и текста(мне реально так нужно). Но на странице текст отображается как будто этих пробелов нет(текст прижат к левому краю элемента), а они мне нужны — я потом буду их поступательно удаляю. Подскажите, как вставить такую строку, чтобы пробелы видимо «присутствовали»(был отступ от края элемента)?
const text = [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'Барсик'].join('')
const one=document.querySelector('.one')
one.textContent = text
Если нужно с помощью JavaScript, то так:
js
Для установки значению input нужно использовать метод val():
Вот код, который я хочу повесить на кнопку (сейчас работает но при нажатии на текст), чтобы данные передавались в input при нажатии кнопки.
Нужна помощь в написании скрипта, который будет заменять наименование ссылки в меню сайта.
Суть в чем: на сайте пункт меню назван «Тренинги», поставили задачу сделать так, чтобы вместо «Тренинги» было «Курсы».
Но скрипт не сработал. правильно ли написан?
Метод createElement предназначен для создания элементов.
Очень нужна помощь в написании короткого кода (js)
Есть кнопка фиксированная на странице, нужно менять текст в зависимости от блока data-section-title="?" при скроле страницы
Скрипт на jQuery для решения этой задачи будет такой:
Поможете?
НО блоки 2 одновременно не выводятся на экран. Что-то напутал скорее всего в синтаксисе JS
В index. html: