javascript - 如何动态添加和删除元素 JavaScript

Question

我有这个让我们说我创建问题的测验制造商。它看起来像这样:

用户可以选择以 4 种不同方式显示此评分系统:

1 2 3 4 5 -> 1-5 评分

1 2 3 4 5 6 7 8 9 10 -> 1-10 评分

⭐⭐⭐⭐⭐ -> 1-5 星

⭐⭐⭐⭐⭐⭐⭐⭐⭐ -> 1-10 颗星

默认评分系统是 1 到 5 个数字。但是用户可以选择使用拨动开关以及星号而不是数字将其从 1 变为 10。我的问题是我不知道如何在打开开关时再添加 5 个数字，然后在关闭时再次删除它们，或者在打开另一个拨动开关时删除数字并添加星号。
我想我需要类似的东西:

depending on the current state:
if (1-10_switch.isChanged){
   (addMore(stars || numbers) || remove ) 
}
else if (stars_switch.isChanged){
   (changeIconTo(stars || numbers)) 
}

我有代码来检查开关是否打开和关闭:

oneToTenButtonCheckbox.addEventListener("change", function () {
    OneToTen = OneToTen ? false : true;
});

starsButtonCheckbox.addEventListener("change", function () {
    isStars = isStars ? false : true;
});

这是我添加数字的代码:

  var numbersDiv = document.createElement("div");  
  numbersDiv.className = "row";
  for (let i = 0; i < 5; i++) {
    var num = document.createElement("div");
    num.insertAdjacentText("beforeend", i + 1);
    if (i == 0) num.className = "col-1 offset-1 mb-2";
    else num.className = "col-1 mb-2";
    numbersDiv.appendChild(num);
  }

有谁知道我可以用什么方法来解决这个问题？或者也许有人已经做过并且知道该怎么做？谢谢。

Answer 1

我不会动态生成该 HTML。预先创建它，并使用 CSS 类隐藏最后 5 个元素。这些数字也可以在开始时使用 CSS 计数器生成。
有了这个设置，代码只需要切换 CSS 类:

const answer = document.querySelector("#answer");
document.querySelector("#oneToTenButtonCheckbox").addEventListener("change", () => {
    answer.children[1].classList.toggle("hidden");
});
document.querySelector("#starsButtonCheckbox").addEventListener("change", () => {
    answer.classList.toggle("stars");
});

body {
    counter-reset: star-num;
}
#answer.stars > span > span::after {
    content: "⭐";
}
#answer > span > span::after {
    counter-increment: star-num;
    content: counter(star-num);
}
#answer > span > span {
    display: inline-block;
    text-align: center;
    width: 30px;
}
.hidden {
    display: none
}

<label><input type=checkbox id="oneToTenButtonCheckbox">1 - 10</label><br>
<label><input type=checkbox id="starsButtonCheckbox">Stars</label><br>
 
<div id="answer">
    <span><span></span><span></span><span></span><span></span><span></span></span><span class="hidden"><span></span><span></span><span></span><span></span><span></span></span>
</div>