Вывести элемент записанный в виде строковой переменной на страницу

Question

Вывести элемент записанный в виде строковой переменной на страницу

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

Хочу собрать элемент/набор элементов в виде строковой переменной и вывести все это дело на страницу.

 Пример элемента:

    elem = '<button>'+'abc'+'</button>'

Пробовал выводить это через .textContent=elem и .append(elem), но почему-то js это воспринимает, не, как элемент, а просто как строку. Вот так вот это выглядит->

Как можно реализовать эту идею?

javascript html frontend

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

Answer 1

▲ 1Принят

Подсказали с решением - использовать вместо textContent это-> innerHtml

Answer 2

▲ 0

var button = document.createElement('button');
button.innerHTML = 'abc';
var myDiv = document.getElementById('myDiv');
myDiv.appendChild(button);

<div id="myDiv"></div>

Answer 3

▲ 0

Хочу собрать элемент/набор элементов в виде строковой переменной и вывести все это дело на страницу.

Есть метод insertAdjacentHTML. Имеет хорошее количество возможностей...

  div.insertAdjacentHTML('beforebegin', '<p>Привет</p>');
  div.insertAdjacentHTML('beforeend', '<p>Я тут</p>');
  div.insertAdjacentHTML('afterend', '<p>Пока</p>');

div {
  border: 1px solid;
}

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

Более подробнее про преобразовании ДОМ можно прочитать в учебнике. https://learn.javascript.ru/modifying-document

Вывести элемент записанный в виде строковой переменной на страницу

Ответы