如何动态创建和附加到DIV？

Question

I have a container #form_wrapper and I want to dynamically add inputs from an array rf_fields . Assume the value of the array is 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>' );
  }

The output I get is:

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

The output I intend to get is:

<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>

Can someone help me understand what I am doing wrong? Thanks!

Answer 1

Just put = at appropriate places, and the code will work.

$('#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

You are missing the necessary = 's for attributes. You also need to ensure you append to the newly created element, else it will fail after the first loop.

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