Traté de poner elementos "p" () en los elementos "div" (contenedor) pero fallé -->
let t = [ "First line!", "Second line!", "Third line!", "Fourth line!" ]; let T = t.length; function load(){ for(let i = 0; i < T; i++){ let contElem = document.createElement("div"); contElem.setAttribute("class", "container"); contElem.setAttribute("onload", "load02()"); document.querySelector("#main").appendChild(contElem); } } function load02(){ for(let i = 0; i < T; i++){ let myElem = document.createElement("p"); myElem.innerHTML = t[i]; document.querySelector(".container").appendChild(myElem); } }¡Pero no funcionó! ¡Ayuda!
Su atributo onload nunca se activará... Dado que el DOM ya se ha "cargado" en este punto... Solo necesita llamar a la función... Y llamar a load2() al final de la función 1
let t = [ "First line!", "Second line!", "Third line!", "Fourth line!" ]; let T = t.length; load(); // RUN YOUR FUNCTION function load(){ for(let i = 0; i < T; i++){ let contElem = document.createElement("div"); contElem.setAttribute("class", "container"); //contElem.setAttribute("onload", "load2()"); // REMOVE THIS document.querySelector("#main").appendChild(contElem); } load2(); //ADD THIS } function load2(){ for(let i = 0; i < T; i++){ let myElem = document.createElement("p"); myElem.innerHTML = t[i]; document.querySelector(".container").appendChild(myElem); } } .container{ border:1px solid #FF0000; height:50px; width:50px; } <div id="main"> </div> let t = [ "First line!", "Second line!", "Third line!", "Fourth line!" ]; let T = t.length; function load() { for (let i = 0; i < T; i++) { let contElem = document.createElement("div"), myElem = document.createElement("p"); contElem.setAttribute("class", "container"); myElem.innerHTML = t[i]; contElem.appendChild(myElem); document.querySelector("#main").appendChild(contElem); } } load(); <div id="main"></div>¿Eso funciona? ¿O quería poner los cuatro elementos p en cada elemento div contenedor?