Question

0

77

Views

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

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!

7 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T12:12:50.572Z

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>

Answer 2 · 2022-07-03T12:12:50.580Z

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?