Cómo cambiar el contenido del elemento HTML en JavaScript
El acrónimo HTML de Hyper Text Mark Up Language se utiliza para crear la estructura de las páginas web que ve en Internet todos los días. Mientras tanto, JavaScript es un lenguaje de secuencia de comandos bien conocido que se utiliza para realizar operaciones dinámicas en páginas web para que sean más interactivos.
Una característica HTML interesante es HTML DOM Short para el modelo de objeto de documento. Es una API de programación para documentos HTML y XML. Básicamente se usa para proporcionar una estructura lógica a los documentos. Define cómo se puede evaluar y manipular un documento HTML. Permite a JavaScript alterar el contenido de los elementos HTML.
En este artículo discutiremos:
- Alterar el contenido de los elementos HTML usando JavaScript
- Alteración del valor del atributo HTML usando JavaScript
- Uso del documento.método de escritura
Alterar el contenido de los elementos HTML usando JavaScript
La propiedad innerhtml es el enfoque más rápido para alterar el contenido de los elementos HTML. Se explica en detalle a continuación:
propiedad innerhtml
La propiedad innerhtml altera el contenido de un elemento HTML. Para usar este método, use la siguiente sintaxis.
Sintaxis del uso de InnerHTML
documento.getElementById (ID).innerhtml = nuevo htmlProbemos la propiedad InnerHTML con un ejemplo.
Ejemplo 1
Este es un párrafo
El párrafo anterior fue cambiado por la propiedad InnerHTML
En el ejemplo anterior, estamos manipulando el
Elemento utilizando la propiedad JavaScript InnerHTML. El párrafo tiene un id = "para1". El HTML DOM usa esta ID para obtener el elemento particular y luego cambiar el contenido de
Etiqueta usando la propiedad InnerHTML. De esta manera, el nuevo párrafo se sobrescribe por el nuevo párrafo. La salida del ejemplo anterior es el siguiente:
También podemos cambiar los elementos utilizando este método. Hagamos un ejemplo en el que la propiedad innerhtml cambia la
elemento usando su identificación.
Ejemplo 2
Cambiemos este encabezado
El viejo rumbo ha sido cambiado
En el ejemplo anterior, HTML DOM usa el id = "head2" para obtener el
El elemento y la propiedad InnerHTML cambia el contenido del elemento. La salida es la siguiente.
Ahora discutamos cómo podemos cambiar el valor de un atributo HTML usando JavaScript.
Alterar el valor del atributo
Usando el nombre del atributo podemos alterar el valor del atributo HTML.
Sintaxis
La sintaxis se muestra a continuación:
documento.getElementById (ID).atributo = nuevo valorVamos a demostrar la sintaxis anterior utilizando un ejemplo adecuado.
La imagen del perro se cambia a la imagen del gato
En el ejemplo anterior, HTML DOM obtiene el elemento IMG por id = "Image1", entonces el atributo SRC JavaScript de un dogpic.JPG a una catpic.JPG.
Pasando al último método que es documento.método de escritura.
documento.escribir()
documento.Write () se usa para escribir expresiones HTML o código JavaScript directamente en la transmisión de salida HTML. Sobrescribirá el documento si usa este método después de cargar el documento HTML. Intentemos un ejemplo.
Este es un párrafo
Este es otro párrafo
En el ejemplo anterior, el documento.El método Write () muestra la altura de la pantalla de la ventana como salida.
Conclusión
HTML DOM proporciona ciertas propiedades que permiten a JavaScript alterar el contenido de los elementos HTML. Para alterar el contenido de los elementos HTML, se utiliza la propiedad innerhtml (). También puede cambiar el valor de atributo de los elementos HTML utilizando directamente el nombre del atributo. Mientras tanto, el documento.La propiedad Write () se utiliza para escribir expresiones HTML o código JavaScript directamente en HTML SALIDA SEMTRET. Este artículo analiza estas propiedades en detalle con ejemplos relevantes.