Como saben, JavaScript es un lenguaje dinámico de secuencias de comandos. Para proporcionar funcionalidad dinámica a las páginas web, el código HTML se puede escribir utilizando elementos HTML en JavaScript, y los atributos CSS se pueden utilizar en combinación con elementos HTML en JavaScript para personalizar su página web. JavaScript "createElement ()"El método le permite crear elementos HTML y el"innerhtmlLa propiedad le permite escribir contenido para páginas web.

Este tutorial describirá los métodos para escribir el código HTML dinámicamente utilizando JavaScript.

Cómo escribir el código HTML dinámicamente usando JavaScript?

Para escribir el código HTML usando JavaScript, use los siguientes métodos:

• Uso del documento.método createElement ()
• propiedad innerhtml

Método 1: Escriba el código HTML dinámicamente usando el documento.método createElement ()

JavaScript "documento.createElement ()"Método con el"contenido del textoLa propiedad se utiliza para escribir un código HTML en JavaScript dinámicamente. Usando el método createElement (), puede crear un cierto elemento HTML y la propiedad TextContent se usa para establecer el contenido de texto.

Sintaxis

Use la sintaxis dada para crear un elemento HTML en JavaScript:

documento.CreateElement ('tagname')

Ejemplo

Aquí, primero, crearemos un párrafo en un archivo JavaScript utilizando el HTML

La etiqueta pasó en un "createElement ()" método:

Const Text = Documento.createElement ('P');

Use la propiedad TextContent para establecer el texto en un párrafo:

texto.TextContent = "Bienvenido a Linuxhint";

Finalmente, imprima el texto en la página web utilizando el "documento.escribir()" método:

documento.Escribir (texto.contenido del texto);

Aquí, puede ver en la salida que escribimos con éxito el texto en la página web usando JavaScript:

Método 2: Escriba el código HTML dinámicamente utilizando la propiedad InnerHTML

Para escribir el código HTML dinámicamente, use el JavaScript "innerhtml" propiedad. Es el enfoque más simple para cambiar el contenido de un elemento HTML. Admite todos los navegadores.

Sintaxis

Siga la sintaxis dada para usar la propiedad InnerHTML:

innerhtml = "texto"

Ejemplo

En el archivo HTML, primero, cree un botón que llame a la función definida "título()"En JavaScript en el evento de clic:

haga clic aquí

Crear un párrafo usando

Etiqueta donde el texto se mostrará desde JavaScript y asigne una ID:

Defina una función "título()"En un archivo JavaScript. Obtenga la referencia del elemento HTML utilizando su ID asignada con la ayuda del "getElementById ()Método "y aplicar un"innerhtml"Propiedad en él:

Function Heading ()
documento.getElementById ('encabezado').innerhtml = "

Bienvenido a Linuxhint

";

Producción

Hemos compilado toda la información esencial relacionada con la escritura del código HTML dinámicamente utilizando JavaScript.

Conclusión

Para escribir el código HTML dinámicamente en JavaScript, use el "documento.createElement ()"Método con el"contenido del texto"Propiedad o el"innerhtml" propiedad. En el primer método, no necesita ningún código HTML, mientras que en la propiedad InnerHTML, debe acceder al elemento HTML y realizar una operación en él. En este tutorial, describimos los métodos para escribir el código HTML usando JavaScript dinámicamente.