In questo articolo discuteremo come creare un elemento HTML tramite JavaScript. Di seguito vedremo alcuni esempi per inserire l'elemento creato nel documento.
La creazione di elementi tramite HTML non è l'unico modo per creare elementi. Tuttavia, per semplicità, molte volte creiamo elementi direttamente nel documento HTML ma utilizzando JavaScript è anche possibile creare elementi.
IL document.createElement() viene utilizzato per creare dinamicamente un nodo di elementi HTML con il nome specificato tramite JavaScript. Questo metodo prende il nome dell'elemento come parametro e crea quel nodo dell'elemento.
Dopo la creazione di un elemento, possiamo utilizzare il metodo appendChild() o il metodo insertBefore() per inserire l'elemento creato nel documento.
Possiamo usare il rimuoviChild() metodo per rimuovere un nodo e può anche utilizzare il metodo sostituisciChild() metodo per sostituire il nodo.
Sintassi
document.createElement(nodename);
Questo metodo accetta un singolo valore di parametro indicato come segue:
inversione delle corde in c
nome nodo: E' il parametro obbligatorio. Questo parametro è di tipo stringa. Specifica il nome dell'elemento che dobbiamo creare. Il nome dell'elemento specificato nel parametro creerà l'elemento; altrimenti, se il nome dell'elemento specificato non viene riconosciuto, verrà creato un elemento HTML sconosciuto.
IL document.createElement() restituirà l'elemento appena creato.
Vediamo ora alcuni esempi di utilizzo di document.createElement() metodo. Qui mostreremo due esempi. Nel primo esempio utilizzeremo il file appendChild() per inserire l'elemento nel documento e nel secondo esempio utilizzeremo il metodo inserirePrima() metodo per inserire un elemento creato da document.createElement() metodo.
Esempio 1
In questo esempio, stiamo utilizzando il file document.createElement() metodo per creare un nuovo elemento pulsante. Inseriremo l'elemento creato utilizzando il file appendChild() metodo. Qui c'è un divertimento() metodo che creerà un nuovo elemento pulsante utilizzando il metodo creaelemento() metodo. Impostiamo il testo utilizzando il file innerHTML che verrà visualizzato nella parte superiore del pulsante.
Vediamo l'esempio riportato di seguito.
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 Provalo adesso Produzione
Dopo l'esecuzione del codice sopra, l'output sarà:
Dopo aver fatto clic sul pulsante indicato, l'output sarà:
Esempio2
In questo esempio, stiamo utilizzando il file document.createElement() metodo per creare un nuovo elemento pulsante. Qui stiamo usando il inserirePrima() metodo per inserire l'elemento creato. C'è un elemento div che ha un elemento figlio paragrafo. Il nuovo elemento pulsante verrà inserito prima dell'elemento figlio paragrafo dell'elemento div.
Vediamo l'esempio riportato di seguito.
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 Provalo adesso Produzione
Dopo l'esecuzione del codice sopra, l'output sarà:
Dopo aver fatto clic sul pulsante sopra, l'output sarà:
Lo screenshot sopra mostra che il nuovo elemento pulsante viene inserito prima dell'elemento paragrafo. Questo perché abbiamo utilizzato il file insertBeofre() metodo per inserire il nuovo elemento creato utilizzando il file document.createElement() metodo.