Javascript Innerhtml

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Deberá saber còmo cambiar el texto o el HTML que aparece en la página para que sus sitios sean más interactivos. Ahì es donde entran los atributos HTML innerText e innerHTML.

Estos atributos facilitan el cambio de texto y HTML de un elemento DOM còdigo. En esta guìa, aprenderá a utilizar los atributos innerText e innerHTML de JavaScript.

¿Qué es JavaScript innerHTML?

La propiedad innerHTML de JavaScript establece el contenido HTML de un elemento en una página web. InnerHTML es una propiedad de HTML DOM. innerHTML se utiliza a menudo para establecer y modificar el contenido de un "p" elemento.

Puede usar innerHTML asì:

document.getElementById (" párrafo "). innerHTML = " Python.Engineering! & rdquo ;;

Esta lìnea de còdigo establece el contenido del " párrafo " "p" elemento a " Python.Engineering! " El método getElementById () recupera un elemento por su ID.

El navegador define un Document Object Model (DOM) cuando se carga una página. Este DOM es una serie de objetos que se muestran en la página.

El DOM significa que no tienes que cambiar el còdigo HTML cada vez que quieras cambiar un elemento web. Puede usar DOM y JavaScript para cambiar la apariencia de la página en una sesiòn en particular.

¿Qué es JavaScript innerText?

La propiedad innerText de JavaScript establece el contenido de texto de un elemento. También establece el contenido de sus descendientes. Los descendientes pueden incluir "span" etiquetas dentro de un párrafo.

La sintaxis de innerText es similar a la de innerHTML:

document.getElementById (" element "). innerText = " Esto es una prueba. & rdquo ;;

Esto establece el valor de texto del elemento con el id " element " a " Esto es una prueba "

Puede probar estos métodos entrando en su consola JavaScript y seleccionando un elemento para cambiar:

Esto cambia el contenido de la primera etiqueta HTML "p" en una página web. Si desea reemplazar el texto, puede usar el atributo innerText:

Esto cambia el contenido del segundo párrafo (indicado por el n√∫mero 1) en la página a " Esto es una prueba & rdquo ;.

Comencemos cambiando el texto en una página web. Vamos a crear una página web de tarjeta flash simple. Esta página web mostrará una pregunta sobre HTML. Tendrá un botòn que, al hacer clic, revelará la respuesta a una pregunta sobre HTML.

Crear una página web

Nuestro primer paso es crear un archivo index.html para nuestro front-end:

Esta página crea un contenedor con tres componentes. Primero, tenemos la pregunta que le estamos haciendo al usuario. Tenemos el mensaje sobre còmo revelar la respuesta. Nuestra página termina con un botòn para revelar la respuesta.

Nuestro còdigo devuelve el contenido de texto de nuestros elementos:

6T3AqzAPinI7lFyjQvH2K5A7rt 1RCErWqdxCPfZsgbtsRnymdUu9CRkmnu6SLrXKDZ19i9pObkHLyFwA3q3CI2vsm1IfCvU3AYYkweMNHLbOYGhgByfgvd417wxRACkh08KQrYx

vamos a aplicar algunos estilos CSS en un archivo styles.css para hacer nuestra página más bonita:

Ahora echemos un vistazo a nuestra página web:

Acuv0IVyLlR1c2 EiCi4KGUjIRL47I85nFJfPbVzO DFk7bGtEq0PvcutixgrZEGOCBva3hJkyy7XP83DahvKKYgPdIp0jfHD2sY3hdOSUjBjVcAhxeIgOwOH733NW6syaFhNluO

Nuestros espectáculos sitio algo que parece más a una tarjeta de memoria flash. Hemos dise√±ado nuestro botòn.

Cambiar texto usando JavaScript innerHTML e innerText

Queremos que la respuesta a la pregunta sea revelada cuando se haga clic en el botòn. Primero, vamos a seleccione el texto y los elementos de botòn que vamos a utilizar en nuestro còdigo JavaScript. Escribiremos todo este còdigo en nuestro archivo scripts.js:

A continuaciòn, estamos vamos a crear una funciòn JavaScript . Esta funciòn revela la respuesta a nuestra pregunta cuando se hace clic en el botòn:

Para activar nuestra funciòn al presionar un botòn, vamos a crear un detector de eventos simple. Este oyente escucha un clic en nuestro botòn:

Hemos terminado de configurar nuestra aplicaciòn de tarjeta flash. Si vemos nuestra página web y hacemos clic en el botòn " Mostrar respuesta ", el texto de nuestro párrafo se cambia para revelar la respuesta: