How can I put individual "p" elements into the "container" div using js function-CodePudding

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!

CodePudding user response：

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?

CodePudding user response：

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>