Šajā rakstā mēs apspriedīsim, kā izveidot HTML elementu, izmantojot JavaScript. Šeit mēs redzēsim dažus piemērus izveidotā elementa ievietošanai dokumentā.
Elementu izveide, izmantojot HTML, nav vienīgais veids, kā izveidot elementus. Tomēr vienkāršības labad daudzas reizes mēs veidojam elementus tieši HTML dokumentā, bet, izmantojot JavaScript, ir iespējams arī izveidot elementus.
The document.createElement() tiek izmantots, lai dinamiski izveidotu HTML elementa mezglu ar norādīto nosaukumu, izmantojot JavaScript. Šī metode izmanto elementa nosaukumu kā parametru un izveido šī elementa mezglu.
Pēc elementa izveides varam izmantot appendChild() metodi vai metodi insertBefore(), lai ievietotu izveidoto elementu dokumentā.
Mēs varam izmantot noņemtBērns() metodi, lai noņemtu mezglu, un var arī izmantot aizstātBērns() metode mezgla nomaiņai.
Sintakse
document.createElement(nodename);
Šī metode pieņem vienu parametra vērtību, kas norādīta šādi:
attēlu izlīdzināšana css
mezgla nosaukums: Tas ir obligāts parametrs. Šis parametrs ir virknes tipa. Tas norāda elementa nosaukumu, kas mums ir jāizveido. Parametrā norādītais elementa nosaukums radīs elementu; pretējā gadījumā, ja norādītā elementa nosaukums netiek atpazīts, tiks izveidots nezināms HTML elements.
The document.createElement() atgriezīs jaunizveidoto elementu.
Tagad apskatīsim dažus izmantošanas piemērus document.createElement() metodi. Šeit mēs parādīsim divus piemērus. Pirmajā piemērā mēs izmantosim appendChild() metode elementa ievietošanai dokumentā, un otrajā piemērā mēs izmantosim insertBefore() metode, lai ievietotu elementu, ko izveidojis document.createElement() metodi.
Piemērs1
Šajā piemērā mēs izmantojam document.createElement() metode, lai izveidotu jaunu pogas elementu. Mēs ievietosim izveidoto elementu, izmantojot appendChild() metodi. Šeit ir a jautri () metode, kas izveidos jaunu pogas elementu, izmantojot CreateElement() metodi. Mēs iestatām tekstu, izmantojot innerHTML kas tiks parādīts pogas augšpusē.
Apskatīsim tālāk sniegto piemēru.
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 Izmēģiniet to tagad Izvade
Pēc iepriekš minētā koda izpildes izvade būs -
Pēc noklikšķināšanas uz dotās pogas izvade būs -
Piemērs2
Šajā piemērā mēs izmantojam document.createElement() metode, lai izveidotu jaunu pogas elementu. Šeit mēs izmantojam insertBefore() izveidotā elementa ievietošanas metode. Ir div elements, kuram ir rindkopas pakārtotais elements. Jaunais pogas elements tiks ievietots pirms div elementa rindkopas atvasinātā elementa.
Apskatīsim tālāk sniegto piemēru.
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 Izmēģiniet to tagad Izvade
Pēc iepriekš minētā koda izpildes izvade būs -
Pēc noklikšķināšanas uz iepriekš esošās pogas izvade būs -
Iepriekš redzamajā ekrānuzņēmumā redzams, ka jaunais pogas elements ir ievietots pirms rindkopas elementa. Tas ir tāpēc, ka mēs esam izmantojuši insertBeofre() metode jaunā elementa ievietošanai, kas izveidots, izmantojot document.createElement() metodi.