Три способа создать 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.
