Introducción al Javascript

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>