Ebben a cikkben megvitatjuk, hogyan hozhat létre HTML-elemet JavaScript segítségével. Itt láthatunk néhány példát a létrehozott elem dokumentumba való beillesztésére.
Az elemek létrehozása nem az egyetlen módja a HTML-alapú elemek létrehozásának. Az egyszerűség kedvéért azonban sokszor közvetlenül a HTML dokumentumban hozunk létre elemeket, de JavaScript használatával is lehetőség van elemek létrehozására.
A document.createElement() a megadott nevű HTML elem csomópont dinamikus létrehozására szolgál JavaScript segítségével. Ez a metódus az elem nevét veszi paraméterként, és létrehozza az elem csomópontját.
Egy elem létrehozása után vagy az appendChild() metódussal vagy az insertBefore() metódussal illeszthetjük be a létrehozott elemet a dokumentumba.
Használhatjuk a RemoveChild() módszert a csomópont eltávolítására, és használhatja a csereChild() módszer a csomópont cseréjére.
Szintaxis
document.createElement(nodename);
Ez a módszer egyetlen paraméterértéket fogad el, amely a következőképpen van megadva:
nyisson meg egy fájlt java-val
csomópontnév: Ez a kötelező paraméter. Ez a paraméter karakterlánc típusú. Megadja az elem nevét, amelyet létre kell hoznunk. A paraméterben megadott elemnév hozza létre az elemet; ellenkező esetben, ha a megadott elem nevét nem ismeri fel a rendszer, egy ismeretlen HTML elem jön létre.
A document.createElement() visszaadja az újonnan létrehozott elemet.
Most lássunk néhány példát a document.createElement() módszer. Itt két példát mutatunk be. Az első példában a appendChild() módszerrel beilleszthetjük az elemet a dokumentumba, a második példában pedig a insertBefore() által létrehozott elem beszúrásának módszere document.createElement() módszer.
Példa1
Ebben a példában a document.createElement() módszer új gombelem létrehozásához. A létrehozott elemet a segítségével illesztjük be appendChild() módszer. Itt van egy móka () módszerrel, amely új gombelemet hoz létre a createElement() módszer. A szöveget a segítségével állítjuk be innerHTML amely megjelenik a gomb tetején.
Nézzük az alábbi példát.
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 Tesztelje most Kimenet
A fenti kód végrehajtása után a kimenet a következő lesz:
Az adott gombra kattintás után a kimenet a következő lesz:
Példa2
Ebben a példában a document.createElement() módszer új gombelem létrehozásához. Itt a insertBefore() módszert a létrehozott elem beszúrásához. Van egy div elem, amelynek van egy bekezdés gyermekeleme. Az új gombelem a div elem bekezdés gyermekeleme elé kerül beszúrásra.
Nézzük az alábbi példát.
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 Tesztelje most Kimenet
A fenti kód végrehajtása után a kimenet a következő lesz:
A fenti gombra kattintás után a kimenet a következő lesz:
A fenti képernyőképen látható, hogy az új gombelem a bekezdéselem elé kerül beszúrásra. Ez azért van, mert használtuk a insertBeofre() segítségével létrehozott új elem beszúrásának módja document.createElement() módszer.