Propiedad innerhtml en JavaScript
Para una mejor comprensión, hemos dividido el artículo en varios trozos para demostrar el uso de la propiedad InnerHTML en detalle:
- Cómo funciona la propiedad innerhtml en JavaScript
- Cómo obtener el contenido de un elemento utilizando la propiedad InnerHTML
- Cómo establecer el contenido de un elemento utilizando la propiedad innerHTML
- Cómo actualizar el contenido de un elemento utilizando la propiedad innerhtml
Cómo funciona la propiedad innerhtml en JavaScript
La propiedad innerhtml establece/actualiza o devuelve el contenido HTML de un elemento. Ambas funcionalidades de una propiedad innerhtml tienen diferentes sintaxis que se proporcionan a continuación.
Para obtener el contenido HTML:
Htmlobject.innerhtml;Para establecer/actualizar el contenido HTML:
Htmlobject.innerhtml = "New-Val";En las sintaxis anteriores, el Htmlobject La instancia identifica el elemento HTML en el que se aplicará el InnerHTML. Y el elemento se identifica utilizando el GetElementByid método. Mientras que el nuevo es cualquier valor que se estableciera en un elemento HTML.
Cómo usar la propiedad InnerHTML en JavaScript
Esta sección recluta varios ejemplos que demuestran el uso de la propiedad InnerHTML en JavaScript.
Cómo usar la propiedad InnerHTML para actualizar el contenido HTML
Los siguientes fragmentos de código demuestran el funcionamiento de la propiedad InnerHTML para actualizar el contenido HTML.
Html
Bienvenido a Linuxhint
El código anterior tiene un H4 elemento con id = "H"Y un botón con al hacer clic atributo.
Javascript
función get ()alerta (documento.getElementById ("H").innerhtml);
El código JavaScript anterior crea una función get () y contiene una alerta que muestra el contenido de elemento id = "H".
Producción
La salida muestra que el contenido de un elemento HTML se muestra como un contenido de alerta.
Cómo usar la propiedad InnerHTML para actualizar el contenido HTML
En esta sección, aprenderá a actualizar el contenido de un elemento HTML utilizando la propiedad innerhtml.
Html
Linuxhint
El código anterior crea un párrafo que tiene id = "P1"Y un botón con un al hacer clic atributo.
Javascript
Function Update ()documento.getElementById ("P1").innerhtml = "bienvenido! La propiedad innerhtml se está utilizando! ";
El código JS escrito anteriormente crea una función llamada actualizar() que se invocará al hacer clic en el botón para aplicar la propiedad InnerHTML en el elemento (párrafo) id = "P1".
Producción
Desde la salida, se observa que el contenido del párrafo se está actualizando.
Cómo usar la propiedad InnerHTML para establecer el contenido HTML
Aquí, mostraremos cómo InnerHTML establece el contenido de un elemento HTML. Para esto, el código HTML y JavaScript practicado en esta sección se elaboran a continuación.
Html
Este es un párrafo
El código HTML anterior tiene dos párrafos donde el valor del primer párrafo (id = "P1") Se usará para establecer el valor del segundo párrafo (id ="p2").
Nota: El div en el código anterior es solo por entender.
Javascript
función set ()const antigua = documento.getElementById ("P1").innerhtml;
documento.getElementById ("P2").innerhtml = antiguo;
Se crea una función set () que tiene dos declaraciones. La primera declaración obtiene el contenido del párrafo (id = "P1") Y lo guarda en una variable (viejo). Y la segunda declaración establece el valor de la variable al párrafo (id = "p2").
Producción
De la salida anterior, el párrafo no tiene nada que mostrar, pero al hacer clic en el botón el contenido del párrafo (id = "P1") Se establece en el párrafo (id ="p2")
Conclusión
La propiedad innerhtml de JavaScript permite obtener o actualizar/establecer el contenido de un elemento HTML. Usando el método GetElementByID, la propiedad innerHTML identifica un elemento HTML. En este artículo, la propiedad innerhtml de JavaScript se demuestra de manera breve. Cada subsección aquí presenta la funcionalidad de la propiedad InnerHTML para obtener, actualizar o establecer el contenido de un elemento HTML.