Javascript：如何为列表添加值并使其即时更新？

我试图创建的函数有这个问题。 我希望脚本获取输入字段的值，用逗号分割并放入一个数组中，该数组将立即显示为复选框列表

代码如下所示

var names=new Array("Johnny","Brat","Anna");
function makelist(namelist){
    var rest = namelist.split(",");
    names.push.apply(names, rest);
}

然后我希望列表立即以我创建的表单显示

<form method="post">
    <input type="text" name="task" value="buy beer" onClick="this.value=''"/><br/>
    <input type="text" name="names"  onBlur="makelist(this.value)" value="add names seperate by comma" onClick="this.value=''"/><br/>
    <script>
        var i;
        for (i = 0; i < names.length; ++i) {
            document.write("<input type='checkbox' name='navn" + i + "'/>" + names[i] + "<br/>");
        }
    </script>
    <input type="submit" name="submit" value="roll"/>
</form>

var i；
对于（i=0；i）；
}

它似乎将名称添加到onblur数组中，但我无法让它在数组更新时立即显示

---

提前感谢

您的主要问题是，for循环只在第一次加载时执行一次。当您想在以后更新DOM时，需要其他一些方法

例如，下面创建了一个包含所有新元素的字符串。然后使用将其插入包装器

HTML

JS

var name=新数组（“Johnny”、“Brat”、“Anna”）；
函数生成列表（名称列表）{
//插入到数组
var rest=namelist.split（“，”）；
name.push.apply（name，rest）；
//插入到dom
var-newEls=''；
对于（var i=0；iYou仅在页面加载时添加
input
元素。您的
makelist
函数需要删除现有的
input
元素并添加新的元素。这非常有效！但有一个问题，它没有显示已经存在的列表。Johnny、Brat、Anna的名字。如何做到这一点？然后添加到that@user2979822在documentReady上使用
names
而不是
rest
在“insert to dom”之后运行代码。原理相同，只是另一个数组。
<form method="post">
 <input type="text" name="task" value="buy beer" onClick="this.value=''"/><br/>
 <input type="text" name="names"  onBlur="makelist(this.value)" value="add names seperate by comma" onClick="this.value=''"/><br/>
 <div id="checkboxes" />
 <input type="submit" name="submit" value="roll"/>
</form>

var names=new Array("Johnny","Brat","Anna");
function makelist(namelist){
  // insert to array
  var rest = namelist.split(",");
  names.push.apply(names, rest);

  // insert to dom
  var newEls = '';
  for( var i=0; i<rest.length; i++) {
   newEls += "<input type='checkbox' name='navn" + (names.length+i) + "'/>" + rest[i] + "<br/>";
  }
  document.getElementById( 'checkboxes' ).insertAdjacentHTML( 'beforeend', newEls );
}