Aquest tutorial descriurà els mètodes per escriure codi HTML de manera dinàmica mitjançant JavaScript.
Com escriure codi HTML dinàmicament utilitzant JavaScript?
Per escriure codi HTML amb JavaScript, utilitzeu els mètodes següents:
Mètode 1: Escriu codi HTML de manera dinàmica mitjançant el mètode document.createElement().
de JavaScript ' document.createElement() ' mètode amb el ' textContent ” s'utilitza per escriure un codi HTML en JavaScript de manera dinàmica. Mitjançant el mètode createElement(), podeu crear un element HTML determinat i la propietat textContent s'utilitza per definir el contingut del text.
Sintaxi
Utilitzeu la sintaxi donada per crear un element HTML a JavaScript:
document. createElement ( 'tagName' )
Exemple
Aquí, primer, crearem un paràgraf en un fitxer JavaScript utilitzant l'etiqueta HTML
passat en un ' createElement() ” mètode:
const text = document. createElement ( 'p' ) ;Utilitzeu la propietat textContent per establir el text en un paràgraf:
text. textContent = 'Benvingut a Linuxhint' ;
Finalment, imprimiu el text a la pàgina web amb el botó “ document.write() ” mètode:
document. escriure ( text. textContent ) ;Aquí, podeu veure a la sortida que escrivim correctament el text a la pàgina web mitjançant JavaScript:
Mètode 2: Escriu codi HTML dinàmicament utilitzant la propietat innerHTML
Per escriure codi HTML dinàmicament, utilitzeu el codi JavaScript ' innerHTML ' propietat. És l'enfocament més senzill per canviar el contingut d'un element HTML. És compatible amb tots els navegadors.
Sintaxi
Seguiu la sintaxi donada per utilitzar la propietat innerHTML:
innerHTML = 'text'Exemple
Al fitxer HTML, primer, creeu un botó que cridarà la funció definida ' encapçalament () ” en JavaScript a l'esdeveniment de clic:
< botó al fer clic = 'encapçalament()' > Clica aquí botó >Creeu un paràgraf amb l'etiqueta
on es mostrarà el text del JavaScript i assigneu-li un identificador:
< p id = 'encapçalament' > pàg >Definiu una funció ' encapçalament () ” en un fitxer JavaScript. Obteniu la referència de l'element HTML utilitzant el seu identificador assignat amb l'ajuda del ' getElementById() mètode i aplicar un innerHTML 'Propietat sobre ell:
encapçalament de la funció ( ) {document. getElementById ( 'encapçalament' ) . innerHTML = '
Benvingut a Linuxhint
' ;}
Sortida
Hem recopilat tota la informació essencial relacionada amb escriure el codi HTML de manera dinàmica mitjançant JavaScript.
Conclusió
Per escriure codi HTML dinàmicament en JavaScript, utilitzeu el ' document.createElement() ' mètode amb el ' textContent ' propietat o el ' innerHTML ' propietat. En el primer mètode, no necessiteu cap codi HTML, mentre que a la propietat innerHTML, heu d'accedir a l'element HTML i realitzar-hi una operació. En aquest tutorial, vam descriure els mètodes per escriure codi HTML mitjançant JavaScript de manera dinàmica.