Cómo insertar un elemento al DOM en JavaScript

En mis artículos anteriores, analizamos cómo agregar marcado y texto sin formato a elementos HTML mediante el uso de JavaScript estándar. En este artículo, aprenderá a crear e inyectar un nuevo elemento al DOM con JavaScript.

JavaScript proporciona el createElement() método para crear un nuevo elemento DOM. Usemos este método para crear un nuevo <div> elemento:

const div = document.createElement('div');

El nuevo elemento es un nodo DOM totalmente manipulable. Puede agregar clases de CSS, establecer ID y otros atributos, agregar textos y marcas, etc.:

// set attributes
div.id = 'hint';
div.className = 'course-hint';

// add markup
div.innerHTML = '<p>Learn JavaScript</p>';

Una vez que esté listo, use el appendChild() método para añadir el elemento HTML al DOM:

// grab target element reference
const target = document.querySelector('#intro');

// append div to target
target.appendChild(div);

El código anterior insertará el nuevo elemento como último hijo del nodo de destino. Para insertar el nuevo elemento dentro del <body> etiqueta, use el siguiente ejemplo:

// insert element to the body
document.body.appendChild(div);

Alternativamente, puede usar el insertBefore() método para insertar un elemento en el DOM, justo antes o después un nodo existente como se muestra a continuación:

// insert the element before target element
target.parentNode.insertBefore(div, target);

// insert the element after target element
target.parentNode.insertBefore(div, target.nextSibling);