В тази статия ще обсъдим как да създадете HTML елемент чрез JavaScript. Тук ще видим някои примери за вмъкване на създадения елемент в документа.
Създаването на елементи чрез HTML не е единственият начин за създаване на елементи. Въпреки това, за простота, много пъти създаваме елементи директно в HTML документа, но с помощта на JavaScript също е възможно да създаваме елементи.
The document.createElement() се използва за динамично създаване на възел на HTML елемент с посоченото име чрез JavaScript. Този метод приема името на елемента като параметър и създава този възел на елемента.
След създаването на елемент можем да използваме метода appendChild() или метода insertBefore(), за да вмъкнем създадения елемент в документа.
Можем да използваме removeChild() метод за премахване на възел и може също да използва replaceChild() метод за подмяна на възела.
Синтаксис
document.createElement(nodename);
Този метод приема една единствена стойност на параметъра, която е заявена, както следва:
какво е autowired в java
име на възел: Това е задължителен параметър. Този параметър е от тип низ. Той определя името на елемента, който трябва да създадем. Името на елемента, посочено в параметъра, ще създаде елемента; в противен случай, ако името на указания елемент не бъде разпознато, ще бъде създаден неизвестен HTML елемент.
The document.createElement() ще върне новосъздадения елемент.
Сега нека видим някои примери за използване на document.createElement() метод. Тук ще покажем два примера. В първия пример ще използваме appendChild() метод за вмъкване на елемента в документа, а във втория пример ще използваме вмъкванеПреди() метод за вмъкване на елемент, създаден от document.createElement() метод.
Пример1
В този пример ние използваме document.createElement() метод за създаване на нов елемент бутон. Ще вмъкнем създадения елемент с помощта на appendChild() метод. Тук има а забавление() метод, който ще създаде нов елемент на бутон с помощта на 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 Тествайте сега Изход
След изпълнението на горния код, изходът ще бъде -
След като щракнете върху бутона по-горе, изходът ще бъде -
Екранната снимка по-горе показва, че новият елемент на бутона е вмъкнат преди елемента абзац. Това е така, защото сме използвали вмъкниBeofre() метод за вмъкване на новия елемент, създаден с помощта на document.createElement() метод.