Изменение текста и содержимого HTML
Обновляйте содержимое с помощью textContent и innerHTML.
«Изменение текста и содержимого HTML» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Чтение и запись текста
Чтобы изменить отображаемое элементом содержимое, можно задать его текст или HTML. Правильный выбор зависит от того, нужна ли вам разметка и насколько вы доверяете данным.
textContent
textContent получает или задаёт исходный текст элемента. При установке этого свойства все дочерние элементы заменяются одним текстовым узлом, а содержимое обрабатывается как обычный текст.
const el = document.querySelector("#status");
el.textContent = "Saved!";textContent экранирует разметку
Поскольку это обычный текст, любой HTML в строке отображается буквально, а не разбирается. Это защищает от внедрения содержимого.
el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>innerHTML
innerHTML получает или задаёт HTML-разметку внутри элемента. При установке свойства строка разбирается как HTML, после чего создаются настоящие узлы.
const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";innerHTML заменяет всё содержимое
Присваивание значения свойству innerHTML удаляет существующие дочерние элементы и заново создаёт поддерево из новой разметки.
box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";Опасность XSS
Никогда не помещайте непроверенный пользовательский ввод в innerHTML. Вредоносная строка может внедрить скрипты или обработчики событий — это уязвимость, называемая XSS.
const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;innerText
innerText похож на textContent, но учитывает стили: он отражает отображаемый текст и игнорирует скрытые элементы.
console.log(el.innerText); // visible text onlytextContent и innerText
textContent возвращает весь текст, включая скрытое содержимое, и работает быстрее, поскольку не запускает перерасчёт компоновки. innerText учитывает компоновку и работает медленнее.
el.textContent; // all text, even display:none
el.innerText; // only what is visually renderedБезопасное добавление текста
Чтобы добавить текст, не удаляя существующие узлы, создайте текстовый узел или используйте insertAdjacentText, а не перезаписывайте textContent.
el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");Вставка HTML без повторного разбора
insertAdjacentHTML добавляет разметку в указанную позицию, не разбирая заново весь элемент, поэтому работает эффективнее, чем пересоздание содержимого через innerHTML.
box.insertAdjacentHTML("beforeend", "<li>New item</li>");Выбор подходящего свойства
Используйте textContent для обычного текста — это безопасный вариант по умолчанию, innerHTML только для надёжной разметки, а innerText, когда нужен именно отображаемый видимый текст.
Быстрая проверка
Выберите безопасный подход.
Итоги
textContent задаёт обычный экранированный текст и является безопасным вариантом по умолчанию. innerHTML разбирает разметку, но при непроверенном вводе создаёт риск XSS. innerText отражает только видимый отображаемый текст. Для добавления содержимого предпочитайте insertAdjacentHTML/insertAdjacentText, а не перезаписывайте весь элемент.
Часто задаваемые вопросы
Урок «Изменение текста и содержимого HTML» бесплатный?
Да — полный текст урока «Изменение текста и содержимого HTML» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Изменение текста и содержимого HTML»?
Обновляйте содержимое с помощью textContent и innerHTML. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Изменение текста и содержимого HTML»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Изменение текста и содержимого HTML
- Создание и вставка элементов
- Изменение атрибутов и классов
- Удаление и замена узлов