Javascript DOM正在无序创建HTML元素

我正在尝试使用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");

结果是两个“select”元素出现在最顶部，尽管之前已经创建了标签元素

因此，最终呈现如下所示：

选择元素

选择元素

---

label您将

select

元素附加到与

label

（和其他）元素不同的容器中

将它们全部附加到子对象后，可以使其按预期工作

---

在我看来，您的API最好采用一个对象参数，这样您就可以标记值。

我认为在了解

标签

和

选择输入元素

（可能还有其他函数）的工作原理之前，我们不能说太多。emaillenin-我不知道如何“刷新”已经存在的元素，因为每次调用这些函数时，元素都会堆积在一起。所以我改变了我正在做的“隐藏”和使元素块可见。后来我发现我可以使用$（“#”+“input_child”）.remove（）来“刷新”创建的元素；删除已经创建的内容，并重新绘制我想要的元素的正确组合。我希望有一个评论框，供那些给我负面意见的人使用，这样我就可以知道我做错了什么，不再做了。谢谢。我犯了一个愚蠢的错误，所以我应该得到否决票。@ninja08我不认为你因为犯了错误而被否决。你最初问了一个无法回答的问题，因为你没有提供足够的信息。

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