如何动态添加和删除元素JavaScript
如何动态添加和删除元素JavaScript
提问于 2022-07-29 08:05:10
我有这个，比方说小测验，我在这里做问题。看起来是这样的：
用户可以选择以4种不同的方式显示此评级系统：
- 1 2 3 4 5 -> 1-5 rating
- 1 2 3 5 6 7 8 10 -> 1-10 rating
- ⭐⭐⭐⭐⭐ -> 1-5 stars
- ⭐⭐ -> 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);
}有人知道我能用什么方法解决这个问题吗？或者是有人做了这件事知道该怎么做？谢谢。
回答 6
Stack Overflow用户
发布于 2022-07-29 09:14:49
我不会动态地生成那个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>
Stack Overflow用户
发布于 2022-07-29 08:21:54
您可以将创建数字的逻辑输入到一个函数中：
var numbersDiv = document.createElement("div");
numbersDiv.className = "row";
function createNumbers(startNumber, endNumber)
for (let i = startingNumber; i <= endNumber; i++) {
var num = document.createElement("div");
// add id so you can delete later
num.id = "ratingNumber" + i;
num.insertAdjacentText("beforeend", i);
if (i == 1) num.className = "col-1 offset-1 mb-2";
else num.className = "col-1 mb-2";
numbersDiv.appendChild(num);
}
}
//initial call to create 1-5
createNumbers(1, 5)然后，事件处理程序将事件本身作为参数来接收，如果是复选框(我假设这是一个由于变量名而产生的复选框)，该事件包含一个checked属性，因此您可以更改事件侦听器：
oneToTenButtonCheckbox.addEventListener("change", function (event) {
event.checked ? createNumbers(6, 10) : removeNumbers(6, 10);
});然后创建一个removeNumbers方法：
function removeNumbers(startNumber, endNumber) {
for (let i = startNumber; i <= endNumber; i++) {
const numToRemove = document.getElementById("ratingNumber" + i);
numToRemove.remove()
}
}Stack Overflow用户
发布于 2022-07-29 08:31:34
增加新元素：
// first: make a new element
let li = document.createElement('li')
// second:add new element to Parent Node(such as ul)
//Insert at the end of the parent element
ul.appendChild(li)
//Insert into the specified position of the parent element
ul.insertBefore(li, ul.children[0])
//Please note that before you add the DOM child nodes (step 2) please complete the processing you need to do for the child nodes删除元素：
ul.removeChild(li)尝试在你的代码中使用这个，希望它能帮助你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73163500
复制相关文章
相似问题
腾讯云开发者
