更新结果div

Question

我正在制作一个程序，在该程序中，我在select中选择一些元素，并在按下按钮时通过脚本创建一些结果。结果从数据库中检索并存储在数组中。对于数组中的每个元素，我创建一些li元素，然后将它们附加到div中，div在按下按钮后显示。

以下是小提琴的示例：https://jsfiddle.net/Khan1016/mkfpezy8/1/

这是脚本的预览：

document.getElementById("b").onclick = function () {
$(".result").show();

var list1= ["a","b","c"];
var text="";
var doc = document.getElementById("result");   

for (i = 0; i < list1.length; i++) {
text = list1[i];
var element = document.createElement("li");
element.textContent = text;
doc.appendChild(element);
}
list1.splice(0,list1.length);
}

我试着"；重置"；数组和文本，但它似乎不起作用。我的问题是，当我第二次按下按钮时，如何更新li元素，而不是将新的li附加到以前的元素上？

Answer 1

您可以使用$(".result").empty();删除内容，如：

document.getElementById("b").onclick = function () {
$(".result").empty();
$(".result").show();
var list1= [
String.fromCharCode(97+Math.floor(Math.random() * 26)),
String.fromCharCode(97+Math.floor(Math.random() * 26)),
String.fromCharCode(97+Math.floor(Math.random() * 26))
];
var text="";
var doc = document.getElementById("result");   

for (i = 0; i < list1.length; i++) {
text = list1[i];
var element = document.createElement("li");
element.textContent = text;
doc.appendChild(element);
}
list1.splice(0,list1.length);
}

.result {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" value="b" id="b">Button</button>
<h1>This are the results:</h1>
<div class="result" id="result"></div>

我用随机字母为模拟结果添加了String.fromCharCode(97+Math.floor(Math.random() * 26))

Answer 2

使用显示和隐藏切换：

document.getElementById("b").onclick = function () {

$( ".result" ).toggle();
}

Answer 3

如果我理解你的意思，你只需要清除现有的divresult。您的代码有点令人困惑，因为您混合了原生JS和jquery——实际上您可以极大地简化它

document.getElementById("b").onclick = function() {
const result = $(".result");
result.empty();
result.show();
["a", "b", "c"].forEach(x => result.append(`<li>${x}</li>`));
}