Для того чтобы динамически добавить элемент на HTML-страницу в JavaScript, можно использовать функцию createElement()
, чтобы создать новый элемент, а затем добавить его на страницу с помощью метода appendChild()
или insertBefore()
.
Вот пример использования функции createElement()
для создания нового элемента div
, и метода appendChild()
для добавления его в конец родительского элемента:
const parentElement = document.getElementById("parent")
const newDiv = document.createElement("div")
newDiv.innerHTML = "Новый элемент"
parentElement.appendChild(newDiv)
В этом примере мы используем метод getElementById()
для получения родительского элемента по его идентификатору, затем используем функцию createElement()
для создания нового элемента div
, и устанавливаем его содержимое с помощью свойства innerHTML
. Наконец, мы используем метод appendChild()
родительского элемента, чтобы добавить новый элемент в конец списка его дочерних элементов.
Если вы хотите добавить новый элемент перед определенным элементом, можно использовать метод insertBefore()
вместо appendChild()
. Вот пример:
const parentElement = document.getElementById("parent")
const existingElement = document.getElementById("existing")
const newDiv = document.createElement("div")
newDiv.innerHTML = "Новый элемент"
parentElement.insertBefore(newDiv, existingElement)
В этом примере мы используем метод getElementById()
для получения родительского элемента и существующего элемента, перед которым мы хотим добавить новый элемент. Затем мы используем функцию createElement()
для создания нового элемента div
, устанавливаем его содержимое, и используем метод insertBefore()
родительского элемента, чтобы добавить новый элемент перед существующим элементом.