Как динамически добавлять элементы html с помощью JavaScript?
HTML-документы можно легко получить и обработать с помощью HTML DOM, который представляет собой HTML-документ в виде древовидной структуры. Когда HTML-документ загружается в окне браузера, он становится объектом Document. С помощью метода document.createElement() вы можете создать указанный HTML-элемент динамически в JavaScript. После создания вы можете добавлять атрибуты. Если вы хотите, чтобы элемент отображался в вашем документе, вы должны вставить его в DOM-дерево документа.
Пример
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <body> <button onclick="create()">Create Heading</button> <script> function create() { var h1 = document.createElement('h1'); h1.textContent = "New Heading!!!"; h1.setAttribute('class', 'note'); document.body.appendChild(h1); } </script> </body> </html> |
Поэтому document.createElement используется с тегом HTML для создания элемента. TextContent затем изменяется, а затем атрибут класса изменяется с помощью setAttribute. Это также можно использовать для добавления атрибута данных или любого другого атрибута, например, в HTML. Наконец, элемент добавляется к телу с помощью метода appendChild элемента body.
Сила того, что мы видели сегодня, заключается в том, что мы создаем и стилизуем элементы «на лету». Это ваше решение либо добавить все элементы на странице во время проектирования, либо вы можете создавать и вставлять элементы HTML во время выполнения, что динамически использует метод createElement().