DOM은 순서가 잘못된 HTML 요소를 만듭니다.

Question

DOM을 사용하여 HTML 요소를 동적으로 만들려고합니다.

요소는 모두 순서가 어긋나는 것을 제외하고 모두 그려집니다.

이

function inputForms(goal){ 
if(goal=="fatloss"){ 
    // remove any form previous created 
    $("#"+"input_child").remove(); 
    // create new form section 
    createDiv("input_parent","input_child"); 
    // create form elements 
    Label("input_parent","curr_act_label","curr_act_lvl","Current Activity Level:"); 
    selectInputElement("input_child","curr_act_lvl"); 
    selectOption("curr_act_lvl","Please Select Your Current Activity Level...", "none"); 
    selectOption("curr_act_lvl","No Exercise or Desk Job", "1.25"); 
    selectOption("curr_act_lvl","Little Daily Activity or Light Exercise 1-3 Days Weekly", "1.35"); 
    selectOption("curr_act_lvl","Moderately Active Lifestyle or Moderate Exercise 3-5 Days Weekly", "1.55"); 
    selectOption("curr_act_lvl","Physically Demanding Lifestyle or Hard Exercise 6-7 Days Weekly", "1.75"); 
    selectOption("curr_act_lvl","Hardcore Lifestyle 24/7", "1.95"); 

    Label("input_parent","curr_bodyfat_label","curr_bodyfat_input","Current Bodyfat:"); 
    InputField("input_parent","curr_bodyfat_input","text",5,3) 

    Label("input_parent","curr_weight_label","curr_weight_input","Current Weight:"); 
    InputField("input_parent","curr_weight_input","text",5,3) 

    Label("input_parent","meals_label","meals_input","Daily Meals:"); 
    InputField("input_parent","meals_input","text",5,1) 

    Label("input_parent","goal_bf_pct_label","curr_weight_input","Current Weight:"); 
    InputField("input_parent","curr_weight_input","text",5,3) 

    Label("input_parent","time_label","time_input","Weeks To Goal:"); 
    InputField("input_parent","time_input","text",5,2) 

    Label("input_parent","deficit_label","deficit_select","Decifict By:"); 
    selectInputElement("input_child","deficit_select"); 
    selectOption("deficit_select","Please Select a deficit Method:", "none"); 
    selectOption("deficit_select","Burn With Exercise", "burn"); 
    selectOption("deficit_select","Fasting/Calorie Restriction Without Exercise", "starve"); 

결과는 두 개의 "선택"요소가 그들 앞에 레이블 요소를 생성하는 데에도 불구하고 맨 위에 표시입니다 : 여기 예를 들어

만들고 요소를 추가 기능이 모습입니다.

그래서이 같은 렌더링 끝 :

선택 요소

선택 요소

라벨 < --- 첫 번째 선택 요소

라벨

inputfield

에 속하는

라벨

입력 필드

라벨

입력 필드

라벨

라벨 < - 두 번째 입력 필드에 속하는 다음과 같이 더보고 해야하는

(강조 조직에 공백 추가) :

라벨 선택 소자

라벨 inputfield

라벨 입력 필드

라벨 입력 필드

라벨 여기

그 요소를 생성하는 제 함수이다 선택 소자 :

function createDiv(section_id, div_id){ 
section=document.getElementById(section_id); 

div=document.createElement("div"); 
div.setAttribute("id",div_id); 

section.appendChild(div); 

} 

function selectInputElement(section_id,input_select_id){ 
section=document.getElementById(section_id); 

select_element=document.createElement("select"); 
select_element.setAttribute("id",input_select_id); 


section.appendChild(select_element); 
} 

function selectOption(input_select_id,option_text,option_value){ 
element=document.getElementById(input_select_id); 

option=document.createElement("OPTION"); 
text=document.createTextNode(option_text); 
option.setAttribute("value",option_value); 
option.appendChild(text); 

element.appendChild(option); 
} 


function InputField(section_id,input_id,element_type,size,length){ 

section=document.getElementById(section_id); 

input_field=document.createElement("input"); 
input_field.setAttribute("id",input_id); 
input_field.setAttribute("type",element_type); 
input_field.setAttribute("maxlength",size); 
input_field.setAttribute("size",length); 
section.appendChild(input_field); 

} 

function Label(section_id,label_id,label_for,label_text){ 
section=document.getElementById(section_id); 

label=document.createElement("label"); 
label.setAttribute("id",label_id); 
label.setAttribute("for",label_for); 
label_txt=document.createTextNode(label_text); 
label.appendChild(label_txt); 

section.appendChild(label); 
} 

Answer 1

당신은 label (및 기타) 요소가 아닌 다른 컨테이너에 select 요소를 추가하고 있습니다.

어린이에게 모두 첨부하면 예상대로 작동합니다.

http://jsfiddle.net/53WGn/

IMO, 당신의 API를 사용하면 값 레이블을 할 수 있도록 단일 개체 인수를 잘 할 것입니다.