如何动态创建和追加DIV

How to dynamically create and append to a DIV?

本文关键字：创建 追加 DIV 动态 何动态      更新时间：2023-09-26

我有一个容器#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>

有人能帮我理解我做错了什么吗?谢谢!

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

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

您缺少属性所需的= 's。您还需要确保您追加了新创建的元素，否则它将在第一次循环后失败。

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'));
}
相关文章：