Come cambiare gli elementi HTML usando JavaScript
Questo articolo discuterà la procedura per modificare gli elementi HTML usando JavaScript. Inoltre, gli esempi relativi all'uso della proprietà InnerHTML saranno anche dimostrati in questo articolo. Quindi iniziamo!
Sintassi della proprietà JavaScript Innerhtml
elemento.InnerHtml = ValueQui, "elemento"È l'elemento HTML che hai selezionato per modificarne il contenuto e"valore"È il contenuto che imposteremo.
Esempio 1: modifica degli elementi HTML usando JavaScript
Questo esempio ti mostrerà come usare il "Innerhtml"Proprietà JavaScript per modificare il contenuto di un elemento HTML. In primo luogo, aggiungeremo un elemento di intestazione con il
Tag di intestazione e un paragrafo con il
Tag HTML:
Cambia elementi HTML usando JavaScript
Una stringa di prova
Ora vogliamo cambiare il contenuto di ""Elemento con l'ID"P1". Per farlo, utilizzeremo il "documento.getElementById ()"Metodo per ottenere l'elemento specificato. Dopodiché, imposteremo il contenuto del nostro
elemento a "Questo è Linuxhint.com":
Abbiamo modificato il contenuto del paragrafo sopra
Esegui il programma di cui sopra nel tuo editor di codice preferito o in qualsiasi sandbox di codifica online; Tuttavia, utilizzeremo il JSbin per questo scopo:
Dai un'occhiata all'output di seguito, che abbiamo ottenuto dall'esecuzione del programma di cui sopra:
Esempio 2: modifica degli elementi HTML usando JavaScript
Nell'esempio precedente, abbiamo modificato il contenuto dell'elemento paragrafo. Ora scriveremo un programma JavaScript per modificare il contenuto dell'elemento HTML intestazione.
Come puoi vedere, abbiamo aggiunto un'intestazione con il
Tag con ID "id1"Avere il contenuto"Il vecchio intestazione Javascript":
Il vecchio intestazione Javascript
Nel prossimo passaggio, creeremo una variabile elemento che invocherà il "documento.getElementById ()"Metodo per ottenere l'elemento di intestazione con l'ID"id1":
Questo programma ha cambiato "The Old JavaScript Heading" in "The New JavaScript Heading"
L'output di seguito è indicato che il contenuto dell'elemento HTML intestazione viene ora modificato:
Esempio 3: modifica degli elementi HTML usando JavaScript
Puoi anche modificare il contenuto di più elementi HTML contemporaneamente. Per dimostrarti come farlo, aggiungeremo tre elementi HTML, una voce con il
Tag, un paragrafo con il tag e un elemento HTML di divisione dei contenuti con il tag:
Cambia elementi HTML usando JavaScript
Questo è il primo elemento p.
Questo è il primo elemento div.
Ora cambieremo il contenuto dell'elemento di paragrafo con l'ID "P1"E elemento di divisione dei contenuti con"div" id:
Dai un'occhiata all'output del nostro programma JavaScript:
Esempio 4: modifica degli elementi HTML usando JavaScript
Puoi anche eliminare il contenuto di un elemento HTML utilizzando il JavaScript "Innerhtml" proprietà. Nel seguente codice JavaScript, abbiamo aggiunto un elemento di paragrafo con "Demo" id:
Fai clic sul pulsante indicato seguente per eliminare il contenuto HTML
Nel passaggio successivo, aggiungeremo un pulsante e collegheremo un "al clic"Ascoltatore di eventi. Quando faremo clic su "Eliminare"Pulsante, invocherà il"myFunction ()"Metodo per eliminare il contenuto di
Elemento html:
Infine, definiremo il "myFunction ()"Metodo come segue:
L'esecuzione del programma di cui sopra ti mostrerà il seguente output. Clicca sul "Eliminare"Pulsante per eliminare il contenuto dell'elemento HTML di paragrafo:
Come puoi vedere, il "Innerhtml"Proprietà del
L'elemento HTML è ora impostato su vuoto:
Conclusione
IL Innerhtml La proprietà HTML DOM viene utilizzata per modificare il contenuto degli elementi HTML in JavaScript. Può anche essere usato per scrivere l'HTML dinamico sul documento HTML, come collegamenti, moduli di commento e moduli di registrazione. Questo articolo ha discusso della procedura per modificare gli elementi HTML usando JavaScript. Inoltre, in questo articolo sono dimostrati esempi relativi all'uso della proprietà HTML InnerHTML.