Три способа создать HTML элемент в JavaScript

Три способа создать HTML элемент в JavaScript

Три способа создать HTML элемент в JavaScript

Здравствуйте! В сегодняшней статье мы рассмотрим три способа модификации страницы сайта, при помощи JavaScript.
Итак. Нам нужно будет создать рабочую папку с html и js файлами.

Первый способ, предполагает использование метода createElement().

В js файле прописываем код:

<!--
Создадим HTML-элемент div в JavaScript, вызвав метод createElement() для объекта документа .
Этот метод принимает аргумент, который будет элементом HTML.
Затем, назначим его константе с именем container.
Установим для свойства id ящика значение ' container '.
И добавим его в иерархию DOM методом appendChild() 

-->

const container = document.createElement("div");
container.id = "container";
document.body.appendChild(container);

Теперь к элементу container можно добавить дочерний элемент кнопки.


const btn = document.createElement('btn');
btn.innerText = 'btn';
btn.id = 'btn-1';
container.appendChild(btn);

Второй способ — использование Object.Assign().

Метод копирует в первый аргумент значения из последующих.


document.body
  .appendChild(
  Object.assign(
    document.createElement('div'),
    { id:'container'}
  )
).appendChild(
  Object.assign(
    document.createElement('btn'),
    { innerHTML : 'btn' ,
      id:'btn-1'
    }
  )
)

Третий способ — Обратные кавычки.

Данный способ является самым простым из всех используемых. Мы просто создаем строку с html
внутри js файла и присваиваем ее константе. Далее добавляем строку в структуру DOM,
назначив ее свойству innerHTML документа document.body.


const container = `
  <div id='container'>
    <btn id='btn-1'>btn</btn>
  </div>`;

document.body.innerHTML = container;

Таким образом, мы рассмотрели несколько вариантов модификации HTML при помощи JavaScript.

Источник