JavaScript

Append JS: как добавить элемент или текст на страницу

append в JavaScript добавляет текст или DOM-узел внутрь элемента, в конец его содержимого. Чаще всего его используют, чтобы добавить новый элемент списка, карточку, сообщение или обычный текст на страницу

Минимальный пример:

<div id="box"></div>

<script>
  const box = document.querySelector("#box");
  box.append("Привет");
</script>

После выполнения кода внутри div появится текст Привет

Добавить HTML-элемент через append

Правильный и безопасный учебный путь — создать элемент через createElement, заполнить его и добавить:

<ul id="list"></ul>

<script>
  const list = document.querySelector("#list");

  const item = document.createElement("li");
  item.textContent = "Новая задача";

  list.append(item);
</script>

Так на странице появится:

<li>Новая задача</li>

Важно: append добавляет реальный DOM-элемент, если передать ему элемент. Если передать строку, он добавит текст

Пример: список из массива

<ul id="skills"></ul>

<script>
  const skills = ["HTML", "CSS", "JavaScript"];
  const list = document.querySelector("#skills");

  for (const skill of skills) {
    const item = document.createElement("li");
    item.textContent = skill;
    list.append(item);
  }
</script>

Это уже практический сценарий: данные лежат в массиве, а JavaScript выводит их на страницу

Добавить несколько элементов за один раз

append может принять несколько аргументов:

<div id="box"></div>

<script>
  const box = document.querySelector("#box");

  const strong = document.createElement("strong");
  strong.textContent = "Важно";

  box.append("Статус: ", strong, " - готово");
</script>

На странице получится текст и элемент strong внутри одного блока. Это удобно для небольших интерфейсных фрагментов, но для крупных шаблонов лучше писать код аккуратно и не превращать append в длинную строку из десятков частей

Пример с кнопкой

<button id="add">Добавить</button>
<ul id="list"></ul>

<script>
  const add = document.querySelector("#add");
  const list = document.querySelector("#list");
  let counter = 1;

  add.addEventListener("click", () => {
    const item = document.createElement("li");
    item.textContent = `Пункт ${counter}`;
    list.append(item);
    counter++;
  });
</script>

Такой пример показывает реальное применение: пользователь нажимает кнопку, JavaScript создает новый элемент и добавляет его в список

append и appendChild

Есть похожий метод appendChild. Отличия:

Метод	Что принимает
`append`	элементы и строки
`appendChild`	только DOM-узел

Пример со строкой:

box.append("Текст");

С appendChild так нельзя, потому что строка не DOM-узел. Для текста через appendChild нужно создать текстовый узел, но для новичка обычно проще использовать append

append и innerHTML

Можно встретить такой код:

box.innerHTML = "<strong>Привет</strong>";

Он работает, но для пользовательских данных опаснее: HTML-строка будет разобрана браузером. Если вы просто выводите текст, лучше:

box.textContent = "Привет";

Если добавляете элемент, используйте createElement и append

Частые ошибки

Добавлять строку с HTML и ждать тег

box.append("<strong>Привет</strong>");

Так добавится текст <strong>Привет</strong>, а не жирный HTML. Чтобы создать тег, используйте createElement

Не найти родительский элемент

Если селектор неверный, box будет null, и box.append(...) вызовет ошибку. Проверьте id и селектор

const box = document.querySelector("#box");

Создать один элемент и добавлять его много раз

Один DOM-элемент не копируется при повторном append, а переносится. Если нужно несколько li, создавайте новый элемент внутри цикла

Ждать, что append вернет добавленный элемент

append ничего полезного не возвращает. Если вам нужно дальше работать с созданным элементом, сохраните его в переменную до добавления:

const item = document.createElement("li");
list.append(item);
item.classList.add("active");

Мини-задание

Создайте массив из трех дел и выведите их в список через createElement("li") и append. Потом добавьте кнопку «Добавить дело», которая добавляет еще один пункт

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

0 комментариев

Старые

Новые Популярные