javascript - jQuery:使用 for 循环从数组动态构建表单

Question

我有一个 jQuery 函数，它接收 div 元素的 id 和 json 数组

function FormBuilder(selector,myList){
    for (var i = 0 ; i < myList.length ; i++) {
        var rowHash = myList[i];
        if(rowHash['id'] > 0 ){
            $(selector).append('<form id="DialerInfo">');
            for (var key in rowHash) {
                $(selector).append(key +': <input type="text" name="' + key + '" value="' + rowHash[key] + '"><br/>');
            }
            $(selector).append('</form>');
        }
    }
}

我希望这能构建一个正确的形式，即所有输入都应该在 <form> 之间和</form>标签。但我收到了完全不同的东西:
首先
<form id="DialerInfo"></form>然后在所有输入字段下方。为什么它们位于表单标签之外？ jQuery 会自动关闭所有标签吗？那么如何防止这种行为呢？

Answer 1

使用 jQuery 创建 DOM 不像字符串连接那样工作

您可以创建一个表单并将所有元素附加到其中

function FormBuilder(selector, myList) {
  var $form = $('<form id="DialerInfo"></form>').appendTo(selector);
  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    if (rowHash['id'] > 0) {
      for (var key in rowHash) {
        $form.append(key + ': <input type="text" name="' + key + '" value="' + rowHash[key] + '"><br/>');
      }
    }
  }
}