Šiame straipsnyje aptarsime, kaip sukurti HTML elementą naudojant JavaScript. Čia pamatysime keletą pavyzdžių, kaip įterpti sukurtą elementą į dokumentą.
Elementų kūrimas naudojant HTML nėra vienintelis elementų kūrimo būdas. Tačiau paprastumo dėlei dažnai elementus kuriame tiesiogiai HTML dokumente, tačiau naudojant JavaScript, taip pat galima sukurti elementus.
The document.createElement() naudojamas dinamiškai sukurti HTML elemento mazgą nurodytu pavadinimu per JavaScript. Šis metodas pasirenka elemento pavadinimą kaip parametrą ir sukuria tą elemento mazgą.
Sukūrę elementą galime naudoti metodą appendChild() arba metodą insertBefore(), kad įterptume sukurtą elementą į dokumentą.
Mes galime naudoti pašalinti Vaiką () būdas pašalinti mazgą ir taip pat gali naudoti pakeisti Vaiką () mazgo pakeitimo metodas.
Sintaksė
document.createElement(nodename);
Šis metodas priima vieną parametro reikšmę, kuri nurodyta taip:
tokia svetainė kaip coomeet
mazgo pavadinimas: Tai yra privalomas parametras. Šis parametras yra eilutės tipo. Jame nurodomas elemento pavadinimas, kurį turime sukurti. Parametre nurodytas elemento pavadinimas sukurs elementą; kitu atveju, jei nurodyto elemento pavadinimas neatpažįstamas, bus sukurtas nežinomas HTML elementas.
The document.createElement() grąžins naujai sukurtą elementą.
Dabar pažiūrėkime keletą naudojimo pavyzdžių document.createElement() metodas. Čia parodysime du pavyzdžius. Pirmajame pavyzdyje naudosime appendChild() būdas įterpti elementą į dokumentą, o antrajame pavyzdyje naudosime insertBefore () būdas įterpti elementą, sukurtą document.createElement() metodas.
1 pavyzdys
Šiame pavyzdyje mes naudojame document.createElement() būdas sukurti naują mygtuko elementą. Sukurtą elementą įterpsime naudodami appendChild() metodas. Čia yra a linksma() metodas, kuris sukurs naują mygtuko elementą naudojant sukurti elementą () metodas. Mes nustatome tekstą naudodami vidinis HTML kuris bus rodomas mygtuko viršuje.
Pažiūrėkime toliau pateiktą pavyzdį.
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 Išbandykite dabar Išvestis
Įvykdžius aukščiau pateiktą kodą, išvestis bus -
Spustelėjus nurodytą mygtuką, išvestis bus -
2 pavyzdys
Šiame pavyzdyje mes naudojame document.createElement() būdas sukurti naują mygtuko elementą. Čia mes naudojame insertBefore () būdas įterpti sukurtą elementą. Yra elementas div, turintis antrinį pastraipos elementą. Naujas mygtuko elementas bus įterptas prieš pastraipos antrinį elemento div elementą.
Pažiūrėkime toliau pateiktą pavyzdį.
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 Išbandykite dabar Išvestis
Įvykdžius aukščiau pateiktą kodą, išvestis bus -
Spustelėjus aukščiau esantį mygtuką, išvestis bus -
Aukščiau pateikta ekrano kopija rodo, kad naujas mygtuko elementas įterpiamas prieš pastraipos elementą. Taip yra todėl, kad mes naudojome insertBeofre() būdas įterpti naują elementą, sukurtą naudojant document.createElement() metodas.