为数组中的每个项目创建一个新元素，追加（问题）

Question

我的问题是，每次我按下按钮时，它都会不断添加。我要它自己替换它。

很可能有更好的方法来解决这个问题。我希望能够在数组中显示所有数据，数组中的每一项都有一个新元素。

我只使用普通 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>

Answer 1

使用 .innerHTML = "" 从您的 UL 中清除当前的 children - 在从更新的数组重建 LI 之前：

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>

使用 DocumentFragment 和 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>

Answer 2

你不断地添加到你的 UL 而没有删除任何 li。因此，除非您删除它并创建一个新的 UL，否则您将继续添加它。

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>

Answer 3

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>

为数组中的每个项目创建一个新元素，追加（问题）

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

html

javascript

arrays

dom

appendchild