JavaScript puede cambiar elementos HTML a través de la manipulación del DOM (Document Object Model). El DOM es una representación en forma de árbol de los elementos de una página web, que permite a los desarrolladores interactuar y modificar los elementos HTML mediante JavaScript. A continuación, se presentan algunos ejemplos de cómo JavaScript puede cambiar elementos HTML.
Cambiar el contenido de un elemento:
<!DOCTYPE html>
<html>
<head>
<title>Cambiar contenido de un elemento</title>
</head>
<body>
<p id="miParrafo">Texto original</p>
<button onclick="cambiarTexto()">Cambiar texto</button>
<script>
function cambiarTexto() {
var elemento = document.getElementById('miParrafo');
elemento.innerHTML = 'Texto modificado por JavaScript';
}
</script>
</body>
</html>
Este ejemplo muestra cómo cambiar el contenido de un elemento HTML. Al hacer clic en el botón, se ejecuta la función cambiarTexto()
, que busca el elemento con ID «miParrafo» y cambia su contenido.
- Cambiar el estilo (CSS) de un elemento:
<!DOCTYPE html>
<html>
<head>
<title>Cambiar estilo de un elemento</title>
</head>
<body>
<p id="miParrafo">Texto con estilo original</p>
<button onclick="cambiarEstilo()">Cambiar estilo</button>
<script>
function cambiarEstilo() {
var elemento = document.getElementById('miParrafo');
elemento.style.color = 'red';
elemento.style.fontSize = '24px';
}
</script>
</body>
</html>
Este ejemplo muestra cómo cambiar el estilo CSS de un elemento HTML. Al hacer clic en el botón, se ejecuta la función cambiarEstilo()
, que busca el elemento con ID «miParrafo» y modifica sus propiedades de estilo, como el color del texto y el tamaño de fuente.
- Agregar y eliminar elementos HTML:
<!DOCTYPE html>
<html>
<head>
<title>Agregar y eliminar elementos</title>
</head>
<body>
<ul id="miLista">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<button onclick="agregarElemento()">Agregar elemento</button>
<button onclick="eliminarElemento()">Eliminar elemento</button>
<script>
function agregarElemento() {
var nuevoElemento = document.createElement('li');
nuevoElemento.textContent = 'Elemento agregado';
document.getElementById('miLista').appendChild(nuevoElemento);
}
function eliminarElemento() {
var lista = document.getElementById('miLista');
lista.removeChild(lista.lastElementChild);
}
</script>
</body>
</html>
Este ejemplo muestra cómo agregar y eliminar elementos HTML. Al hacer clic en el botón «Agregar elemento», se ejecuta la función agregarElemento()
, que crea un nuevo elemento de lista (li) y lo agrega al final de la lista con ID «miLista». Al hacer clic en el botón «Eliminar elemento», se ejecuta la función eliminarElemento()
, que elimina el último elemento de la lista.
Estos ejemplos demuestran cómo JavaScript puede cambiar elementos HTML a través de la manipulación del DOM. Con el tiempo, aprenderás más técnicas y enfoques avanzados para interactuar y modificar elementos HTML utilizando JavaScript.
Deja una respuesta