CODEWITHSUNDEEP
javascripthtmlarraysdomappendchild
EmKl
EmKl

Reputation: 15

Create a new element for every item in an array, appending (issue)

My issue is that every time I press the button it keeps adding. I want it to replace it self.

It's likely that there are better ways to approach this. I want to be able to present all the data in an array, with one new element per item in the array.

I only use vanilla JS

const reBtn = document.getElementById("reBtn");

reBtn.addEventListener("click", function () {
  myfunc();
});

let sortedList = ["1", "2", "3", "4"];
let addParagraph = document.createElement("ul");

function myfunc() {
  sortedList.forEach(function (i) {
    let li = document.createElement("li");
    li.textContent = i;
    addParagraph.appendChild(li);
    resultLeft.appendChild(addParagraph);
  });
}
<button id="reBtn">Result</button>

<div id="resultLeft"></div>

Upvotes: 0

Views: 1695

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

Use .innerHTML = "" to clear the current children from your UL - before rebuilding the LIs from the updated array:

const list = ["1", "2", "3", "4"];

const newEL = (sel, prop) => Object.assign(document.createElement(sel), prop); 
const EL_list = document.querySelector("#resultLeft");
const EL_btn  = document.getElementById("reBtn");

const populateList = () => {
  EL_list.innerHTML = ""; // Clear all
  list.forEach(val => {
    const LI = newEL("li", {textContent: val});
    EL_list.append(LI);
  });
}
EL_btn.addEventListener("click", populateList);
<button id="reBtn">Result</button>

<ul id="resultLeft"></ul>

Example using DocumentFragment and Array.prototype.reduce

const list = ["1", "2", "3", "4"];

const newEL = (sel, prop) => Object.assign(document.createElement(sel), prop); 
const EL_list = document.querySelector("#resultLeft");
const EL_btn  = document.getElementById("reBtn");

const populateList = () => {
  EL_list.innerHTML = "";  // Clear all
  const LIS = list.reduce((DF, val) => {  
    DF.append(newEL("li", {textContent: val}));
    return DF
  }, new DocumentFragment());
  EL_list.append(LIS);
}
EL_btn.addEventListener("click", populateList);
<button id="reBtn">Result</button>

<ul id="resultLeft"></ul>

Upvotes: 0

ulou
ulou

Reputation: 5853

const reBtn = document.getElementById("reBtn");

reBtn.addEventListener("click", myfunc)

const sortedList = ["1", "2", "3", "4"];
const ulElement = document.createElement("ul");

function myfunc() {
  ulElement.textContent = ""
  sortedList.forEach(function (i) {
    const li = document.createElement("li");
    li.textContent = i + " [" + new Date().getSeconds() + "]";
    ulElement.appendChild(li);
  });
  resultLeft.appendChild(ulElement);
}
<button id="reBtn">Result</button>

<div id="resultLeft"></div>

Upvotes: 1

DCR
DCR

Reputation: 15665

You keep adding to your UL without deleting any of the li's. Hence unless you remove it and create a new UL you will keep adding to it.

const reBtn = document.getElementById("reBtn");
const resultLeft = document.getElementById('resultLeft')

reBtn.addEventListener("click", function () {
  myfunc();
});

let sortedList = [[1,2,3,4],[5,6,7,8]];
let cnt = 0;

function myfunc() {
 
 while( resultLeft.firstChild ){  
  resultLeft.removeChild( resultLeft.firstChild );
}

let addParagraph = document.createElement("ul");

 
  sortedList[cnt].forEach(function (i) {
    let li = document.createElement("li");
    li.textContent = i;
    addParagraph.appendChild(li);
    resultLeft.appendChild(addParagraph);
  });
  cnt++
  
  cnt = cnt%2
}
<button id="reBtn">Result</button>

<div id="resultLeft"></div>

Upvotes: 1

Related Questions