如何动态创建并追加到DIV？

Question

我有一个容器#form_wrapper，我想动态添加来自数组rf_fields的输入。假设数组的值是var rf_fields = ['input1...','input2...'];

for(field in rf_fields){ 
    $('#form_wrapper').append('<div class"form_question"></div>'); 
    $('.form_question').append('<div class"title"></div>')  
         .append('<div class"question"></div>')  
         .append($('<input>').attr(rf_fields[ field ])) 
         .append('<div class"eg"></div>'); 
    } 

我得到的输出是：

<div id="form_wrapper"> 
    <div class"form_question"></div> 
    <div class"form_question"></div> 
</div> 

我打算得到的输出是：

<div id="form_wrapper"> 

    <div class"form_question"> 
    <div class"title"> ... </div> 
    <div class"question"> ... </div> 
     --input-- 
    <div class"eg"> ... </div> 
    </div> 

    <div class"form_question"> 
    <div class"title"> ... </div> 
    <div class"question"> ... </div> 
     --input-- 
    <div class"eg"> ... </div> 
    </div> 

</div> 

有人可以帮助我理解我我做错了吗？谢谢！

Answer 1

只需在适当的位置放置=，代码就可以工作。

$('#form_wrapper').append('<div class="form_question"></div>'); 
$('.form_question').append('<div class="title"></div>')  
        .append('<div class="question"></div>')  
        .append($('<input>').attr(rf_fields[ field ])) 
        .append('<div class="eg"></div>'); 

Answer 2

您错过了必要的=的属性。您还需要确保您追加到新创建的元素，否则它将在第一个循环后失败。

for(field in rf_fields){ 
    $('<div class="form_question"></div>') 
     .append('<div class="title"></div>')  
     .append('<div class="question"></div>')  
     .append($('<input>').attr(rf_fields[ field ])) 
     .append('<div class="eg"></div>') 
     .appendTo($('#form_wrapper')); 
}