DIV를 동적으로 만들고 추가하는 방법은 무엇입니까?

Question

컨테이너가 #form_wrapper이고 배열 rf_fields의 입력을 동적으로 추가하려고합니다.

는

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

내가 얻을하려는 출력은 다음과 같습니다 : 가정 배열의 값은 내가 얻을 출력은 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 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')); 
}