Cómo crear elementos html con el método .createElement de javascript

actualizado: 25 / 07 / 2022

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

html<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 haga click sobre el creará un nuevo elemento en el DOM.

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

Agregando css, Para darle forma a las etiquetas html

cssheader {
  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 se vean unn poco mejor.

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 se creará usando javascript.

Crear un div con javascript

Para crear un elemento html usando javascript debemos utilizar el método createElement() esta propiedad permite crear cualquier elemento html para este ejemplo un div.

jsdocument.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 el método classList.add('div') agregamos la clase que previamente se había escrito en css.

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

El método document.createElement solo crea la etiqueta así que 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.