I've nodeClone() a div. I want the element to show only one day in each clone not the whole array

user_19700528 0
Viewed 23
<div class="div-to-clone container text-center">
    <h3 class="text-center mb-3 day-of-week"></h3>
</div>       
<div class="target-1">
</div>

let divToClone = document.querySelector('.div-to-clone');
let target1 = document.querySelector(".target-1");
let h3 = document.querySelector('.day-of-week')

let days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

console.log(days)


for(let i=0; i<7; i++){
    clone = divToClone.cloneNode(true);
    target1.appendChild(clone)
    console.log(target1)
};

//I'm trying to iterate through the array and append it to h3

So far I've been only able to have the whole array(all days in array) render in the h3 element. How do I iterate through it and have only display one day a time as it clones. <h3>monday</h3><h3>tuesday</h3> etc.. I've tried a nested for loop , mapping, append(). I don't understand how to iterate through it and append it to the element

clonenode arrays
1 Answers

Try this

const newday = days.forEach(day => {
 // console.log(day)
 target1.insertAdjacentHTML("beforeend", `<h3>${day}</h3>`)
 console.log(target1)
})
user_32532160
Related