Imagen destacada del artículo Cómo crear elementos html con el método .createElement de javascript

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

html svgjavascript svg
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

css
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 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.

js
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 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.

Artículos relacionados:
Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

Imagen destacada del artículo Cómo poner una imagen de fondo en html con css

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Desestructuración (destructuring) de parámetros en funciones con typescript.

Imagen destacada del artículo Desestructuración (destructuring) de parámetros en funciones con typescript.