У цій статті ми обговоримо, як створити елемент HTML за допомогою JavaScript. Тут ми побачимо кілька прикладів вставлення створеного елемента в документ.
Створення елементів за допомогою HTML — не єдиний спосіб створення елементів. Однак для простоти часто ми створюємо елементи безпосередньо в документі HTML, але за допомогою JavaScript також можна створювати елементи.
The document.createElement() використовується для динамічного створення вузла елемента HTML із вказаною назвою через JavaScript. Цей метод приймає назву елемента як параметр і створює цей вузол елемента.
Після створення елемента ми можемо використовувати метод appendChild() або метод insertBefore(), щоб вставити створений елемент у документ.
Ми можемо використовувати removeChild() метод видалення вузла, а також можна використовувати replaceChild() спосіб заміни вузла.
Синтаксис
document.createElement(nodename);
Цей метод приймає одне значення параметра, яке вказано таким чином:
fmoviez
ім'я вузла: Це обов'язковий параметр. Цей параметр має рядковий тип. Він визначає ім'я елемента, який ми повинні створити. Ім'я елемента, указане в параметрі, створить елемент; інакше, якщо назва вказаного елемента не розпізнається, буде створено невідомий елемент HTML.
The document.createElement() поверне новостворений елемент.
Тепер давайте розглянемо кілька прикладів використання document.createElement() метод. Тут ми покажемо два приклади. У першому прикладі ми будемо використовувати appendChild() для вставлення елемента в документ, а в другому прикладі ми використаємо метод вставитиперед() метод для вставки елемента, створеного за допомогою document.createElement() метод.
Приклад1
У цьому прикладі ми використовуємо document.createElement() метод створення нового елемента кнопки. Ми вставимо створений елемент за допомогою appendChild() метод. Тут є a весело() метод, який створить новий елемент кнопки за допомогою createElement() метод. Ми встановлюємо текст за допомогою innerHTML який відображатиметься у верхній частині кнопки.
Давайте розглянемо приклад, наведений нижче.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button Перевірте зараз Вихід
Після виконання наведеного вище коду результатом буде -
Після натискання вказаної кнопки виведення буде -
Приклад 2
У цьому прикладі ми використовуємо document.createElement() метод створення нового елемента кнопки. Тут ми використовуємо вставитиперед() метод вставки створеного елемента. Існує елемент div, який має дочірній елемент абзацу. Новий елемент кнопки буде вставлено перед дочірнім елементом абзацу елемента div.
Давайте розглянемо приклад, наведений нижче.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button Перевірте зараз Вихід
Після виконання наведеного вище коду результатом буде -
Після натискання кнопки вище результат буде -
На наведеному вище знімку екрана показано, що новий елемент кнопки вставлено перед елементом абзацу. Це тому, що ми використовували insertBeofre() метод для вставки нового елемента, створеного за допомогою document.createElement() метод.