ProgramingWeb

Crear elementos html con javascript

En este tutorial aprenderás a crear elementos html usando javascript, esta tarea es bastante sencilla, además es fundamental conocerla para ser un buen desarrollador. Así que sin más preámbulos empecemos.

Crear estructura Html para nuestro ejemplo

<header>
  <button class="btn">
    crear nuevo Elemento
  </button>
</header>

<section class="container"></section>
  • Tenemos un header con un botón que tiene una clase btn, este botón tendrá la funcionalidad de que cada vez que se clicke en el se creará un nuevo elemento.

  • Luego tenemos una etiqueta section que va a servir como contenedor de los elementos creados.

Agregando css, Para darle forma a las etiquetas html

header {
  padding: 1rem;
  text-align: center;
}

.btn {
  padding: 0.5rem 1rem;
  background: darkRed;
  border: none;
  color: white;
  cursor: pointer;
}

.container {
  background: violet;
  min-width: 100vw;
  min-height: 100vh;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.div {
  height: 200px;
  background: #be333f;
  text-align: center;
  padding: 1rem;
}
  • Agregamos estilos tanto al header como al botón para que no se vean tan feos.

  • A la etiqueta section que tiene la clase .container le aplicamos propiedades de ccs grid para que dependiendo de la pantalla coloque el div que vamos a crear con javascript de forma responsive.

  • Por último le asignamos estilos a la clase .div, que es el elemento que crearemos.

Crear la etiqueta div con javascript

Para crear un elemento html con javascript necesitamos usar el método createElement()', y le debemos pasar entre comillas la etiqueta que deseamos crear en este caso es un div.

document.querySelector(".btn").addEventListener("click", e => {
  const newElement = document.createElement("div")
  newElement.classList.add("div")
  newElement.textContent = "soy un div creado con javascript"
  document.querySelector(".container").appendChild(newElement)
})
  • Lo primero que hacemos es seleccionar el botón y agregarle el evento de click.

  • Dentro de la función creamos la constante newElement con el valor de 'document.createElement('div')', esto crea el div pero solo lo guarda en memoria.

  • Usando classList.add('div') agregamos la clase al elemento.

  • También le añadimos algo de texto con ' textContent = "soy un div creado con javascript" '

  • Para finalizar agregamos el div a nuestro html usando document.querySelector('.container') .appendChild(newElement), con querySelector seleccionamos el contenedor y con appendChild lo agregamos al html.