Javascript puede cambiar contenido HTML
Uno de los muchos métodos que tiene Javascript es getElementById(), mediante este método creamos un ejm que buscará el elemento HTML con el id=”demo” y cambiará el contenido del elemento.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambiar el contenido de un elemento HTML</title>
</head>
<body>
<h1>Cambiar el contenido de un elemento HTML</h1>
<p id="demo"></p>
<button type="button" onclick='getElementById("demo")
.innerHTML = "Hola Javascript"'>Haz clic</button>
</body>
</html>
Javascript acepta tanto comillas dobles como simples.
Javascript puede cambiar valores de atributos HTML
En el siguiente ejm, Javascript cambiará el valor del atributo src (source) de una imagen
Ejm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript puede cambiar valores de atributos</title>
</head>
<body>
<h1>Javascript puede cambiar valores de atributos</h1>
<p>Javascript puede cambiar los valores de los atributos</p>
<button onclick="getElementById('imagen').src='pic_bulboff.gif'">Apagar</button>
<img src="pic_bulboff.gif" id="imagen" />
<button onclick="getElementById('imagen').src='pic_bulbon.gif'">Encender</button>
</body>
</html>
Javascript puede cambiar estilos CSS
Veámoslo con un ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript puede cambiar valores a estilos CSS</title>
</head>
<body>
<h1>Javascript puede cambiar valores a estilos CSS</h1>
<p id="demo">Javascript puede cambiar valores a estilos CSS</p>
<button type="button" onclick='getElementById("demo").style.fontSize="35px"'>Cambiar el tamaño de la fuente</button>
</body>
</html>
Javascript puede ocultar elementos HTML
Se pueden ocultar elementos HTML cambiando el estilo de visualización.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ocultar elementos con Javascrip</title>
</head>
<body>
<h1>Ocultar elementos con Javascrip</h1>
<p id="demo">Este elemento se ocultará cuando se haga clic en el botón</p>
<button
type="button"
onclick="document.getElementById('demo').style.display = 'none'"
>
Haz clic para ocultar el párrafo
</button>
</body>
</html>
Javascript puede mostrar elementos
Al igual que oculta elementos, también puede mostrarlos, veamos un ejm de ello.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mostrar elementos con Javascrip</title>
</head>
<body>
<h1>Mostrar elementos con Javascrip</h1>
<p>Javascript también puede mostrar elementos que están ocultos</p>
<p id="demo" style="display: none">
Este texto oculto se mostrará cuando se haga clic en el botón
</p>
<button
type="button"
onclick="document.getElementById('demo').style.display = 'block'"
>
Haz clic para mostrar el texto oculto
</button>
</body>
</html>