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

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

Есть метод 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

БЛОГ НА HUSL

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

Ответы (3 шт):