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

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

2 个答案: