Este tutorial describirá los métodos para escribir código HTML dinámicamente usando JavaScript.
¿Cómo escribir código HTML dinámicamente usando JavaScript?
Para escribir código HTML usando JavaScript, use los siguientes métodos:
Método 1: Escribir código HTML dinámicamente usando el método document.createElement()
JavaScript's ' documento.createElement() ” método con el “ contenido del texto La propiedad ” se utiliza para escribir un código HTML en JavaScript de forma dinámica. Con el método createElement(), puede crear un determinado elemento HTML y la propiedad textContent se usa para establecer el contenido del texto.
Sintaxis
Use la sintaxis dada para crear un elemento HTML en JavaScript:
documento. crearElemento ( 'nombreEtiqueta' )
Ejemplo
Aquí, primero, crearemos un párrafo en un archivo JavaScript utilizando la etiqueta HTML
pasada en un ' crearElemento() ' método:
constante texto = documento. crearElemento ( 'pag' ) ;Use la propiedad textContent para establecer el texto en un párrafo:
texto. contenido del texto = 'Bienvenido a Linuxhint' ;
Finalmente, imprima el texto en la página web usando el “ documento.escribir() ' método:
documento. escribir ( texto. contenido del texto ) ;Aquí, puede ver en el resultado que escribimos con éxito el texto en la página web usando JavaScript:
Método 2: Escribir código HTML dinámicamente usando la propiedad innerHTML
Para escribir código HTML de forma dinámica, utilice JavaScript “ HTML interno ' propiedad. Es el enfoque más simple para cambiar el contenido de un elemento HTML. Es compatible con todos los navegadores.
Sintaxis
Siga la sintaxis dada para usar la propiedad innerHTML:
HTML interno = 'texto'Ejemplo
En el archivo HTML, primero, cree un botón que llamará a la función definida “ título() ” en JavaScript en el evento de clic:
< botón al hacer clic = 'título()' > haga clic aquí botón >Cree un párrafo usando la etiqueta
donde se mostrará el texto del JavaScript y asígnele una identificación:
< identificación p = 'título' > pag >Definir una función “ título() ” en un archivo JavaScript. Obtenga la referencia del elemento HTML utilizando su ID asignado con la ayuda de ' getElementById() ” método y aplicar un “ HTML interno ” propiedad en él:
encabezado de función ( ) {documento. getElementById ( 'título' ) . HTML interno = '
Bienvenido a Linuxhint
' ;}
Producción
Hemos recopilado toda la información esencial relacionada con la escritura del código HTML de forma dinámica mediante JavaScript.
Conclusión
Para escribir código HTML dinámicamente en JavaScript, use el ' documento.createElement() ” método con el “ contenido del texto ” propiedad o el “ HTML interno ' propiedad. En el primer método, no necesita ningún código HTML, mientras que en la propiedad innerHTML, necesita acceder al elemento HTML y realizar una operación en él. En este tutorial, describimos los métodos para escribir código HTML utilizando JavaScript dinámicamente.