Questo tutorial descriverà i metodi per scrivere codice HTML in modo dinamico utilizzando JavaScript.
Come scrivere codice HTML in modo dinamico utilizzando JavaScript?
Per scrivere codice HTML utilizzando JavaScript, utilizzare i seguenti metodi:
Metodo 1: scrivere codice HTML in modo dinamico utilizzando il metodo document.createElement()
JavaScript ' documento.createElement() ” metodo con il “ textContent La proprietà ” viene utilizzata per scrivere dinamicamente un codice HTML in JavaScript. Utilizzando il metodo createElement(), puoi creare un determinato elemento HTML e la proprietà textContent viene utilizzata per impostare il contenuto del testo.
Sintassi
Usa la sintassi data per creare un elemento HTML in JavaScript:
documento. createElement ( 'nometag' )
Esempio
Qui, per prima cosa, creeremo un paragrafo in un file JavaScript usando il tag HTML
passato in un ' creaElemento() ' metodo:
cost testo = documento. createElement ( 'p' ) ;Usa la proprietà textContent per impostare il testo in un paragrafo:
testo. textContent = 'Benvenuti in Linuxhint' ;
Infine, stampa il testo sulla pagina Web utilizzando il ' documento.write() ' metodo:
documento. scrivere ( testo. textContent ) ;Qui, puoi vedere nell'output che scriviamo correttamente il testo sulla pagina web usando JavaScript:
Metodo 2: scrivere codice HTML in modo dinamico utilizzando la proprietà innerHTML
Per scrivere codice HTML in modo dinamico, usa il codice JavaScript ' innerHTML ' proprietà. È l'approccio più semplice per modificare il contenuto di un elemento HTML. Supporta tutti i browser.
Sintassi
Segui la sintassi data per utilizzare la proprietà innerHTML:
innerHTML = 'testo'Esempio
Nel file HTML, innanzitutto, crea un pulsante che chiamerà la funzione definita ' intestazione() ' in JavaScript sull'evento clic:
< pulsante al clic = 'intestazione()' > Clicca qui pulsante >Crea un paragrafo usando il tag
in cui il testo verrà mostrato dal JavaScript e assegnagli un id:
< p id = 'intestazione' > p >Definire una funzione ' intestazione() ” in un file JavaScript. Ottieni il riferimento dell'elemento HTML usando il suo id assegnato con l'aiuto del ' getElementById() ” metodo e applicare un “ innerHTML ” proprietà su di esso:
intestazione della funzione ( ) {documento. getElementById ( 'intestazione' ) . innerHTML = '
Benvenuto in Linuxhint
' ;}
Produzione
Abbiamo raccolto tutte le informazioni essenziali relative alla scrittura dinamica del codice HTML utilizzando JavaScript.
Conclusione
Per scrivere codice HTML in modo dinamico in JavaScript, utilizzare il ' documento.createElement() ” metodo con il “ textContent ” proprietà o il “ innerHTML ' proprietà. Nel primo metodo non è necessario alcun codice HTML, mentre nella proprietà innerHTML è necessario accedere all'elemento HTML ed eseguire un'operazione su di esso. In questo tutorial, abbiamo descritto i metodi per scrivere codice HTML utilizzando JavaScript in modo dinamico.