Javascript puede cambiar contenido HTML
Uno de los muchos métodos Javascript que puedes usar para cambiar contenido HTML ese el método getElementById().
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>Introducción al Javascript</title>
</head>
<body>
<h1>Cambiar contenido HTML</h1>
<p id="demo">Javascript puede cambiar contenido HTML</p>
<button
type="button"
onclick='document.getElementById("demo").innerHTML = "Hola Javascript"'
>
Haz clic
</button>
</body>
</html>
Javascript acepta comillas dobles o simples.
Javascript puede cambiar valores de atributos
Javascript puede cambiar estilos HTML (CSS)
Cambiar el estilo de un elemento HTML es una variante de cambiar un atributo HTML.
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>Cambiar estilos HTML</title>
</head>
<body>
<h1>Cambiar estilos HTML</h1>
<p id="demo">Javascript puede cambiar estilos CSS de HTML</p>
<button
type="button"
onclick="document.getElementById('demo').style.fontSize='35px'"
>
Haz clic
</button>
</body>
</html>
Javascript puede ocultar elementos HTML
Se pueden ocultar elementos HTML utilizando la propiedad style, de la siguiente manera.
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>Ocultar elementos HTML con Javascript</title>
</head>
<body>
<h1>Ocultar elementos HTML con Javascript</h1>
<h2>Lo que podemos hacer con Javascript</h2>
<p id="demo">Javascript puede ocultar elementos HTML</p>
<button
type="button"
onclick="document.getElementById('demo').style.display='none'"
>
Haz clic
</button>
</body>
</html>
Javascript puede mostrar elementos HTML
Al igual que puede ocultar elementos HTML, también puede mostrarlos, veamos el siguiente ejm
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>Javascript puede mostrar elementos HTML</title>
</head>
<body>
<h1>Mostrando elementos HTML con Javascript</h1>
<p id="demo" style="display: none">Hola Javascript</p>
<button
type="button"
onclick="document.getElementById('demo').style.display='block'"
>
Haz clic
</button>
</body>
</html>