I denne artikkelen skal vi diskutere hvordan du lager et HTML-element via JavaScript. Her vil vi se noen eksempler for å sette inn det opprettede elementet i dokumentet.
Å lage elementer med HTML er ikke den eneste måten å lage elementer på. Men for enkelhets skyld, mange ganger lager vi elementer direkte i HTML-dokumentet, men ved å bruke JavaScript er det også mulig å lage elementer.
De document.createElement() brukes til dynamisk å lage en HTML-elementnode med det angitte navnet via JavaScript. Denne metoden tar navnet på elementet som parameter og oppretter elementnoden.
Etter opprettelsen av et element kan vi enten bruke appendChild()-metoden eller insertBefore()-metoden for å sette inn det opprettede elementet i dokumentet.
Vi kan bruke removeChild() metode for å fjerne en node og kan også bruke replaceChild() metode for å erstatte noden.
Syntaks
document.createElement(nodename);
Denne metoden godtar en enkelt parameterverdi som er angitt som følger:
fibonacci kode java
nodenavn: Det er den obligatoriske parameteren. Denne parameteren er av strengtype. Den spesifiserer elementets navn, som vi må lage. Elementnavnet spesifisert i parameteren vil lage elementet; ellers, hvis det angitte elementnavnet ikke gjenkjennes, vil et ukjent HTML-element bli opprettet.
De document.createElement() vil returnere det nyopprettede elementet.
La oss nå se noen eksempler på bruk av document.createElement() metode. Her vil vi vise to eksempler. I det første eksemplet vil vi bruke appendChild() metode for å sette inn elementet i dokumentet, og i det andre eksemplet vil vi bruke insertBefore() metode for å sette inn et element opprettet av document.createElement() metode.
Eksempel 1
I dette eksemplet bruker vi document.createElement() metode for å lage et nytt knappeelement. Vi vil sette inn det opprettede elementet ved å bruke appendChild() metode. Her er det en moro() metode som vil opprette et nytt knappeelement ved å bruke createElement() metode. Vi setter teksten ved å bruke indreHTML som vil vises på toppen av knappen.
La oss se eksemplet gitt 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 nå Produksjon
Etter utførelse av koden ovenfor, vil utgangen være -
Etter å ha klikket på den gitte knappen, vil utgangen være -
Eksempel 2
I dette eksemplet bruker vi document.createElement() metode for å lage et nytt knappeelement. Her bruker vi insertBefore() metode for å sette inn det opprettede elementet. Det er et div-element som har et underordnet avsnitt. Det nye knappeelementet vil bli satt inn før avsnittsunderelementet til div-elementet.
La oss se eksemplet gitt 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 nå Produksjon
Etter utførelse av koden ovenfor, vil utgangen være -
Etter å ha klikket på knappen ovenfor, vil utgangen være -
Skjermbildet ovenfor viser at det nye knappeelementet er satt inn før avsnittselementet. Dette er fordi vi har brukt insertBeofre() metode for å sette inn det nye elementet opprettet ved å bruke document.createElement() metode.