DOM is creating HTML elements out of order

Question

I am trying to dynamically create HTML elements using the DOM.

The elements are all drawn except that they appear out of order.

For example here is what the function which creates and appends the elements looks like:

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

The result is the two "select" elements appear at the very top despite having created the label elements before them.

So this ends up rendering like this:

select element

label <--- belonging to the first select element

label

inputfield

label

input field

label

input field

label

label <-- belonging to the second input field

It's supposed to look more like this(I added spaces to emphasis organization):

label select element

label inputfield

label input field

label select element

Here are my functions to create those elements:

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

I don't think we can say much until we know how `Label` and `selectInputElement` (and maybe the other functions) work. — Felix Kling, Dec 31 '11 at 20:11
I edited the original question Felix. emaillenin - I didn't know how to 'refresh' what elements were already there since every time I called these functions the elements would pile on top of each other. So I changed what I was doing to 'hide' and make visible blocks of elements. Later on I figured out that I could 'refresh' the created elements using $("#"+"input_child").remove(); to remove what was already created and redrawn the right combination of elements I wanted. — Nick Res, Dec 31 '11 at 20:17
I wish there was a comment box for people who give me negative points so I could know what I did wrong and not do them again. — Nick Res, Dec 31 '11 at 20:20

score 1 · Accepted Answer · answered Dec 31 '11 at 20:23

1

You're appending the select elements to a different container than the label (and other) elements.

Appending all of them to the child makes it work as expected.

http://jsfiddle.net/53WGn/

IMO, your API would do well to take a single object argument so you can label the values.

answered Dec 31 '11 at 20:23

Thank you. I made a dumb mistake so I deserve the down votes. – Nick Res Dec 31 '11 at 20:29
1

@ninja08 I don't think you were downvoted for making a mistake. You initially asked an unanswerable question by not providing enough information. – Dec 31 '11 at 20:30

DOM is creating HTML elements out of order

1 Answers1

Linked