Javascript puede cambiar contenido HTML
Uno de los muchos métodos Javascript es getElementById(). El siguiente ejemplo "busca" un elemento HTML (con id="demo") y cambia el contenido del elemento (innerHTML) a "Hello JavaScript".
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejm 02</title>
</head>
<body>
<h1>Que se puede hacer con Javascript</h1>
<p id="demo">Este párrafo se cambiará</p>
<button type="button" onclick='getElementById("demo").innerHTML = "Hola Javascript"'>Haz clic</button>
</body>
</html>
Javascript puede aceptar comillas simples o comillas dobles.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejm 03</title>
</head>
<body>
<h1>Javascript acepta comillas simples y dobles</h1>
<p id="demo">Esto se cambiará cuando demos al botón</p>
<button type="button" onclick="getElementById('demo').innerHTML = 'Aparecerá esto'">Haz click</button>
</body>
</html>
Javascript puede variar valores de atributos
En este ejm Javascript varía el valor del atributo src para una imagen.
Ejm
<!DOCTYPE html>
<html>
<body>
<h2>Qué se puede hacer con Javascritp</h2>
<p>JavaScript puede cambiar valores de atributos.</p>
<p>En este caso, Javascript cambia el valor del atributo src de una imagen.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>
Javascript puede cambiar estilos CSS
Cambiar el estilo de un elemento HTML es una variante de cambiar un atributo HTML.
Ejm
<!DOCTYPE html>
<html>
<body>
<h2>Qué se puede hacer con Javascript?</h2>
<p id="demo">JavaScript puede cambiar el estilo de un elemento HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Haz click!</button>
</body>
</html>
Javascript puede ocultar elementos HTML
Desde Javascript podemos ocultar elementos manipulando el estilo display.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejm 04</title>
</head>
<body>
<h1>Mostrar u ocultar elementos con Javascript</h1>
<p id="demo">Este texto desaparecerá cuando cliquemos el botón</p>
<button type="button" onclick="getElementById('demo').style.display='none'">Haz click</button>
</body>
</html>
Igualmente Javascript puede mostra elementos HTML igualmente manipulando la propiedad CSS display.
Ejm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejm 05</title>
</head>
<body>
<h1>Mostrar elementos ocultos con Javascript</h1>
<p>Este texto aparecerá visible</p>
<p id="demo" style="display: none;">Este texto no se mostrará hasta que no demos al botón</p>
<button type="button" onclick="getElementById('demo').style.display = 'block'">Haz click</button>
</body>
</html>