Как динамически добавлять элементы html с помощью JavaScript?

Уроки по JavaScript

HTML-документы можно легко получить и обработать с помощью HTML DOM, который представляет собой HTML-документ в виде древовидной структуры. Когда HTML-документ загружается в окне браузера, он становится объектом Document. С помощью метода document.createElement() вы можете создать указанный HTML-элемент динамически в JavaScript. После создания вы можете добавлять атрибуты. Если вы хотите, чтобы элемент отображался в вашем документе, вы должны вставить его в DOM-дерево документа.

Пример

<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>

<html>

<body>

<button onclick="create()">Create Heading</button>

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().

Источник: http://net-informations.com/js/iq/elements.htm

(Пока оценок нет)

Пример

Похожие новости