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>