I tried to put "p" elements() into the "div"(container) elements but failed -->
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);
}
}
but it did not work! Help!
You're attribute onload will never fire ... Since the DOM has already "loaded" at this point .. You just need to call the function .. And call load2() at the end of function 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>Does that work? Or were you wanting to put all four p elements in each containing div element?