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

Question

0

Editorial Team

Asked: May 27, 20262026-05-27T18:51:40+00:00 2026-05-27T18:51:40+00:00

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

0

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