Cómo cambiar los elementos HTML usando JavaScript
Este artículo discutirá el procedimiento para cambiar los elementos HTML usando JavaScript. Además, los ejemplos relacionados con el uso de la propiedad InnerHTML también se demostrarán en este artículo. Entonces, comencemos!
Sintaxis de la propiedad JavaScript innerhtml
elemento.innerhtml = valorAquí, "elemento"Es el elemento HTML que ha seleccionado para cambiar su contenido y"valor"¿Es el contenido que estableceremos.
Ejemplo 1: Cambiar elementos HTML usando JavaScript
Este ejemplo le mostrará cómo usar el "innerhtml"Propiedad JavaScript para modificar el contenido de un elemento HTML. En primer lugar, agregaremos un elemento de encabezado con el
etiqueta de encabezado y un párrafo con el
Etiqueta HTML:
Cambiar elementos HTML usando JavaScript
Una cadena de prueba
Ahora, queremos cambiar el contenido del ""Elemento tiene la identificación"P1". Para hacerlo, utilizaremos el "documento.getElementById ()Método para obtener el elemento especificado. Después de eso, estableceremos el contenido de nuestro
elemento a "Esto es linuxhint.comunicarse":
Hemos cambiado el contenido del párrafo anterior
Ejecute el programa anterior en su editor de código favorito o en cualquier Sandbox de codificación en línea; Sin embargo, utilizaremos el JSBIN para este propósito:
Consulte la salida dada a continuación, que obtuvimos al ejecutar el programa anterior:
Ejemplo 2: Cambiar elementos HTML usando JavaScript
En el ejemplo anterior, hemos cambiado el contenido del elemento de párrafo. Ahora, escribiremos un programa JavaScript para modificar el contenido del elemento HTML de encabezado.
Como puede ver, hemos agregado un encabezado con el
Etiqueta con ID "ID1"Tener el contenido"El viejo encabezado de JavaScript":
El viejo encabezado de JavaScript
En el siguiente paso, crearemos una variable de elemento que invocará el "documento.getElementById ()"Método para obtener el elemento de encabezado con la ID"ID1":
Este programa cambió el "antiguo encabezado de JavaScript" a "El nuevo encabezado de JavaScript"
La salida dada a continuación significa que el contenido del elemento HTML de encabezado se cambia ahora:
Ejemplo 3: Cambiar elementos HTML usando JavaScript
También puede cambiar el contenido de los múltiples elementos HTML a la vez. Para demostrarle cómo hacer eso, agregaremos tres elementos HTML, un encabezado con el
Etiqueta, un párrafo con la etiqueta y un elemento HTML de división de contenido con la etiqueta:
Cambiar elementos HTML usando JavaScript
Este es el primer elemento P.
Este es el primer elemento div.
Ahora, cambiaremos el contenido del elemento de párrafo con la identificación "P1"Y elemento de división de contenido con"div" identificación:
Eche un vistazo a la salida de nuestro programa JavaScript:
Ejemplo 4: Cambio de elementos HTML usando JavaScript
También puede eliminar el contenido de un elemento HTML utilizando el JavaScript "innerhtml" propiedad. En el siguiente código JavaScript, hemos agregado un elemento de párrafo con el "manifestación" identificación:
Haga clic en el botón Dado abajo para eliminar el contenido HTML
En el siguiente paso, agregaremos un botón y adjuntaremos un "al hacer clic"Event Listener To It. Cuando haremos clic en el "Borrar"Botón, invocará el"myFunction ()Método para eliminar el contenido de
Elemento HTML:
Por último, definiremos el "myFunction ()Método de la siguiente manera:
La ejecución del programa anterior le mostrará la siguiente salida. Clickea en el "BorrarBotón para eliminar el contenido del elemento HTML del párrafo:
Como puede ver, el "innerhtml"Propiedad del
El elemento HTML ahora está configurado en blanco:
Conclusión
El innerhtml La propiedad HTML DOM se utiliza para cambiar el contenido de los elementos HTML en JavaScript. También se puede usar para escribir el HTML dinámico en el documento HTML, como enlaces, formularios de comentarios y formularios de registro. Este artículo sobre el procedimiento para cambiar los elementos HTML usando JavaScript. Además, en este artículo también se demuestran ejemplos relacionados con el uso de la propiedad HTML InnerHTML.