Modificando Valores

Nota

JavaScript nos permite modificar valores usando métodos. Interactuando con el DOM, podemos manipular los elementos.


Modificando elementos

Modificar el texto del elemento

Podemos modificar el texto del elemento seleccionado. Usando el método .textContent = "Nuevo Mundo" e igualándolo al valor nuevo.

<!--HTML-->
<h1 id='hello'>Hola Mundo</h1>
const helloText = document.getElementById('hello')
// Modificado el texto del elemento
helloText.textContent = "Nuevo mundo"; 

Modificando estilos

Podemos modificar el estilo de elemento seleccionado (no es recomendado). Usando el método .style+ .background = "#ff3";la propiedad css e igualándolo al valor nuevo.

<!--HTML-->
<h1 id='hello'>Hola Mundo</h1>
const helloText = document.getElementById('hello')
// Modificado el color de texto del elemento
helloText.style.color = "#ff3"; 

Modificar el valor del elemento

Podemos modificar el valor del elemento seleccionado. Usando el método .value = "Modificado desde JS" e igualándolo al valor nuevo.

<!--HTML-->
<input type="text" id="input" placeholder="Escribe el Nombre">
const input = document.getElementById('input')
// Modificamos el valor del elemento
input.value = "Modificado desde JS"; 

Modificar el placeHolder del elemento

Podemos modificar el placeHolder del elemento seleccionado. Usando el método .placeholder = "Escribe tu Nombre.." e igualándolo al valor nuevo.

<!--HTML-->
<input type="text" id="input" placeholder="Escribe el Nombre">
// Modificamos el placeholder del elemento
input.placeholder = "Escribe tu Nombre.."; 

Nota2

Al final podemos modificar multiples cosas de los elementos en si. Las que vimos son algunas de las más usadas pero si quieres aprender más checa la web de MDN

Prueba tu conocimiento

¿Cuál de las siguientes expresiones modifica el texto del elemento con el ID `miid`?

✨ Correcto: ❌ Incorrecto:

¿Cuál de las siguientes expresiones cambia el color de fondo del elemento con el ID `miid` a rojo?

✨ Correcto: ❌ Incorrecto:

¿Cuál de las siguientes expresiones modifica el valor del elemento input con el ID `miid`?

✨ Correcto: ❌ Incorrecto:
Atrás

5

Siguiente