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);