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