Динамическое добавление нового узла в DOM

Question

Динамическое добавление нового узла в DOM

Рейтинг: 0Ответов: 1Опубликовано: 31.07.2023

Я хочу динамически добавить узел, которого нет в DOM, без использования внешних библиотек. Вот HTML код:

function b1_onclick() {
  let d = document.createElement('div');
  let v = document.i1.value;
  d.innerHTML = "<h1>Введено значение ${v}</h1>";
  document.body.appendChild(d);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>C5Task3</title>
</head>

<body>
  <input type="text" id="i1">
  <button type="button" id="b1">Отправить</button>
  <div id="d1"></div>
  <script src="C5Task3.js"></script>
</body>

</html>

Предполагается, что по нажатию кнопки под элементом должен появиться блок ,содержащий внутри HTML-код. И всё это должно отобразиться в окне браузера.

У меня блок div с html-кодом не появляется. Скажите, что я делаю не так?

javascript html dom

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

У вас была ошибка в определении value, а так же для формирования строки с ${} нужны обратные кавычки

function b1_onclick() {
  let d = document.createElement('div');
  let v = document.getElementById('i1').value; // Выбираем элемент и его значение
  d.innerHTML = `<h1>Введено значение ${v}</h1>`; // Формируем строку
  document.body.appendChild(d);
}

<input type="text" id="i1">
<button type="button" id="b1">Отправить</button>
<div id="d1"></div>

P.S.: Обработчик нажатия повесил в атрибуте onclick кнопки. Вы можете поставить обработчик любым другим способом на ваше усмотрение

Динамическое добавление нового узла в DOM

Ответы