Estoy tratando de insertar un elemento con un EventListener en un punto determinado de un elemento. Puedo lograr esto a través appendChild pero quiero insertarlo en un punto determinado. Como esto:
const divT = () => { const div = document.createElement("div"); const div_inside = document.createElement("div"); div_inside.addEventListener("click", () => {console.log("div_inside")}); div_inside.innerHTML = "INSIDE"; div.innerHTML = ` TEST ${div_inside.outerHTML} TEST `; return div; }; document.body.appendChild(divT()); El principal problema es que el outerHTML no contiene la información del oyente. ¿Hay un método para representar el HTML con el oyente aún activo?
Gracias por adelantado
Encuentre una solución utilizando insertAdjacentElement y adjuntando un div vacío:
const divT = () => { const div = document.createElement("div"); const div_inside = document.createElement("div"); div_inside.innerHTML = "Hello World"; div_inside.addEventListener("click", () => {console.log("div_inside")}); div.innerHTML = ` TEST <div id="inside"></div> TEST `; const div_s = div.getElementsByTagName('div') div_s[0].insertAdjacentElement('beforebegin', div_inside) return div; };