I denne artikel skal vi diskutere, hvordan man opretter et HTML-element via JavaScript. Her vil vi se nogle eksempler på at indsætte det oprettede element i dokumentet.
At skabe elementer ved hjælp af HTML er ikke den eneste måde at skabe elementer på. Men for nemheds skyld opretter vi mange gange elementer direkte i HTML-dokumentet, men ved hjælp af JavaScript er det også muligt at oprette elementer.
Det document.createElement() bruges til dynamisk at oprette en HTML-elementnode med det angivne navn via JavaScript. Denne metode tager navnet på elementet som parameteren og opretter den elementknude.
Efter oprettelsen af et element kan vi enten bruge metoden appendChild() eller metoden insertBefore() til at indsætte det oprettede element i dokumentet.
Vi kan bruge removeChild() metode til at fjerne en node og kan også bruge replaceChild() metode til at erstatte noden.
Syntaks
document.createElement(nodename);
Denne metode accepterer en enkelt parameterværdi, der er angivet som følger:
dvale dialekt
nodenavn: Det er den obligatoriske parameter. Denne parameter er af strengtype. Det specificerer elementets navn, som vi skal oprette. Elementnavnet angivet i parameteren vil skabe elementet; ellers, hvis det angivne elements navn ikke genkendes, vil der blive oprettet et ukendt HTML-element.
Det document.createElement() vil returnere det nyoprettede element.
Lad os nu se nogle eksempler på brug af document.createElement() metode. Her vil vi vise to eksempler. I det første eksempel vil vi bruge appendChild() metode til at indsætte elementet i dokumentet, og i det andet eksempel vil vi bruge insertBefore() metode til at indsætte et element skabt af document.createElement() metode.
Eksempel 1
I dette eksempel bruger vi document.createElement() metode til at oprette et nyt knapelement. Vi indsætter det oprettede element ved at bruge appendChild() metode. Her er der en sjovt() metode, der vil oprette et nyt knapelement ved hjælp af createElement() metode. Vi sætter teksten ved at bruge indreHTML som vil blive vist øverst på knappen.
Lad os se eksemplet nedenfor.
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 Test det nu Produktion
Efter udførelse af ovenstående kode vil outputtet være -
Efter at have klikket på den givne knap, vil outputtet være -
Eksempel 2
I dette eksempel bruger vi document.createElement() metode til at oprette et nyt knapelement. Her bruger vi insertBefore() metode til at indsætte det oprettede element. Der er et div-element, der har et underordnet afsnit. Det nye knapelement vil blive indsat før afsnittets underordnede element i div-elementet.
Lad os se eksemplet nedenfor.
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 Test det nu Produktion
Efter udførelse af ovenstående kode vil outputtet være -
Når du har klikket på knappen ovenfor, vil outputtet være -
Ovenstående skærmbillede viser, at det nye knapelement er indsat før afsnitselementet. Dette skyldes, at vi har brugt insertBeofre() metode til at indsætte det nye element oprettet ved at bruge document.createElement() metode.