Javascript 更新结果div

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

以下是小提琴的例子：

这是脚本的预览：

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);
}

document.getElementById（“b”）.onclick=function（）{
$（“.result”）.show（）；
变量列表1=[“a”、“b”、“c”]；
var text=“”；
var doc=document.getElementById（“结果”）；
对于（i=0；i

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

您可以使用

$（“.result”）.empty（）用于删除以下内容：


document.getElementById（“b”）.onclick=function（）{
$（“.result”）.empty（）；
$（“.result”）.show（）；
变量列表1=[
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（“结果”）；
对于（i=0；i

.result{
显示：无；
}

按钮
结果如下：
使用切换显示和隐藏：

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

如果我理解您的意思，您只需要清除现有的div
result
。
当您混合使用本机JS和jquery时，您的代码有点混乱-实际上您可以大大简化它

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

document.getElementById（“b”）.onclick=function（）{
常量结果=$（“.result”）；
result.empty（）；
result.show（）；
forEach（x=>result.append（`
${x}
`））；
}
“$（“.result”）.empty（）；”有效，但h1将被隐藏。我试图实现的是在点击按钮后显示结果，因此没有“预览”。但是，我的案例在单击后显示h1的解决方案是在脚本中创建它。非常感谢。确切地说，在脚本中创建它。