Come creare un elemento HTML tramite JavaScript usando CreateElement

HTML è un linguaggio di markup che dà struttura alle nostre pagine Web mentre JavaScript è un linguaggio di programmazione Web che offre interattività con l'utente. Principalmente, per semplicità, gli sviluppatori definiscono e creano elementi all'interno di HTML. Tuttavia, non è l'unico modo per creare elementi e possiamo anche creare elementi utilizzando il metodo oggetto documento JavaScript createElement () Per rendere la nostra pagina web più dinamica. A causa dell'oggetto documento, possiamo accedere agli elementi HTML.

Cos'è createElement ()?

IL createElement () è un metodo integrato dell'oggetto documento che ha la funzione di creare dinamicamente un elemento HTML e di restituire l'elemento HTML appena creato.

IL sintassi Di createElement () è riportato di seguito:

VAR CREACHELEMENT = Documento.createElement (htmltaGName);

IL createElement () prende un parametro Htmltagname che è un parametro obbligatorio della stringa di tipo ed è il nome del tag di un elemento HTML.

Va notato che il createElement () Il metodo crea un elemento HTML, tuttavia per allegare l'elemento al documento (pagina Web) dobbiamo utilizzare il appendChild () O insertBefore () metodi.

Ora che sappiamo cosa createElement () Il metodo è, guardiamo un esempio per comprendere meglio il createElement () metodo.

Esempio 1:

In questo esempio, creeremo un elemento del pulsante da JavaScript al clic di un pulsante già esistente.

Creiamo innanzitutto un pulsante in HTML che ha un al clic evento allegato ad esso.

Pulsante magico

Ogni volta che un utente farà clic sul pulsante, inizierà a eseguire il myfunc () funzione. Alla fine, abbiamo usato il sceneggiatura tagga e fornito la fonte (codice.js) del file JavaScript che contiene il myfunc () funzione.

Il codice JavaScript è riportato di seguito:

funzione myfunc ()
var mybtn = documento.createElement ("pulsante");
mybtn.InnerHtml = "Nuovo pulsante";
documento.corpo.AppendChild (MyBTN);

Nel codice sopra, in primo luogo, abbiamo inizializzato il myfunc () funzione e quindi creato un elemento pulsante usando il createElement () metodo. Quindi per dare al tito di un tito mybtn.Innerhtml proprietà. Alla fine, abbiamo allegato il pulsante al corpo del nostro HTML usando il appendChild () metodo.

L'output è riportato di seguito:

Possiamo vederlo ogni volta che facciamo clic sul Pulsante magico, crea un nuovo pulsante con il titolo "Nuovo pulsante".

Esempio2:

In questo esempio, creeremo un H2 tag di html tramite javascript e quindi attaccarlo con il corpo html usando il insertBefore () metodo.

A tale scopo, prima di scrivere il codice HTML:

Inserisci l'intestazione sopra questo

Pulsante magico

Il resto del codice è uguale all'esempio 1 con l'eccezione che ora abbiamo creato un elemento Div all'interno del quale abbiamo creato a

Tag con l'ID "parà".

Il codice JavaScript è riportato di seguito:

funzione myfunc ()
var mycontainer = document.getElementById ("MyContainer");
var para = documento.getElementById ("para");
var myheading = document.createElement ("H2");
Myheading.InnerHtml = "New Heading";
mycontainer.insertBefore (Myheading, para);

All'interno della funzione, otteniamo prima il riferimento di e

Elemento di HTML. Quindi creiamo un

elemento usando createElement () metodo. Per inserirlo prima del

elemento usiamo il insertBefore () metodo in cui passiamo il nuovo creato

tag e il

L'output del codice sopra è riportato di seguito:

Ogni volta che facciamo clic sul pulsante Magic, un nuovo elemento H2 viene creato tramite JavaScript createElement () metodo.

Conclusione

L'oggetto documento ci dà accesso agli elementi HTML e uno dei metodi integrati degli oggetti del documento è il createElement () metodo. IL createElement () Il metodo viene utilizzato per creare un elemento HTML dinamicamente prendendo il nome del tag HTML come parametro e quindi restituendo l'elemento HTML appena creato. Per allegare l'elemento HTML appena creato a HTML utilizziamo il appendChild () O insertBefore () metodi.

In questo post, abbiamo visto come creare un elemento HTML usando il createElement () Metodo in JavaScript.