如何動態創建並追加到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')); 
}