Question

I want to display some drop-lists in the web page, so I created table, table body, row and cell with document.createElement() method; then I create the select elements and add them to the cells with appendChild() method. The web page can display the drop-lists.

Then I want to add a sentence to give user a hint, like “This drop-list is for xxxx, and you can use it to xxx”. I decide to use label to do it. So I create a label. But I don’t want to add the label to a separate cell behind the drop-list. I want to add the label just after the drop-list. So I use appendChild() again to add the label and select in the same cell – Firstly append select, secondly append label. But the label is displayed BEFORE the select in the web page.

Then I tried to append the label to the select as a child node of the select. Then the label disappears. Only select is displayed.

I’m a very newbie about HTML/Javascript/DOM. Maybe my thought is wrong from the beginning. Is there anyone can give me a way to implement my requirement? I just want to add a sentence after a drop-list.

Thanks in advance.

======================================================

if (request.readyState == 4 && request.status == 200) {
    maindiv = document.getElementById("maintable");
    optiondiv = getDivRef("optiondiv");

    //create a table to hold the options.
    mytable     = document.createElement("table");  
    mytablebody = document.createElement("tbody");  


    option_array = splitOptions(request.responseText.replace(/[\r\n]/g, ""), ';');
    for (xindex = 0; xindex < option_array.length; xindex++) {

        _select = createSelect(_tmp_option_pair[0]);


        mycurrent_row = document.createElement("tr");  

        mycurrent_cel2 = document.createElement("td");  // for drop list
        mycurrent_cel3 = document.createElement("td");  // for hint


        try {
            for (yindex = 0; yindex < _tmp_option_list.length; yindex++) {
                _select.add(new Option(_tmp_option_list[yindex], yindex), null);
            }

        }catch (ex) {
            for (yindex = 0; yindex < _tmp_option_list.length; yindex++) {
                _select.add(new Option(_tmp_option_list[yindex], yindex));
            }
        }

        _label2 = createLabel(_tmp_option_pair[0] + "_Label2");
        _label2.setAttribute("for", _select.id);
        _label2.innerText = "test1";


        //add obj to dom tree               
        mycurrent_cel2.appendChild(_select);
        mycurrent_cel2.appendChild(_label2);

        mycurrent_row.appendChild(mycurrent_cel2);
        mycurrent_row.appendChild(mycurrent_cel3);
        mytablebody.appendChild(mycurrent_row);
    }
}

The generated html code is

<td>
    <select is="GuestID">
       <option>xxxxx</option>
       .....
    </select>
    <label id="GuestID_Label2" for="GuestID">test1</label>
</td>

The CSS code

label {
    font-weight: bold; text-align: right; width: 100px; display: block; float: left; clear: left; margin-right: 3px; cursor: pointer 
}

Answer 1

It would be useful if you were able to post an example to your code so we could see your problem. Are you able to view the source of your page after the JavaScript has run? (Chrome is able to do this) – just to make sure the elements are in the right order there?

I’ve made a jsFiddle from what I think you’re trying to do and it seems to be in the right order (select, then label). Do you have any CSS styling or anything that’s causing the element ordering to change a bit?

http://jsfiddle.net/nauFw/

Appending the label as a child node to the select won’t work as it can only have option elements as its children.

To be honest, I would have a look at what you’re doing in the first place. If it’s possible to not generate the HTML using JavaScript then I would recommend doing that. If you need to only show certain elements based on what the user is doing then it’s better to have everything and show/hide the necessary bits. Or if you can load the HTML from an external source and append to where you need, that would be better.

DOM operations in JavaScript are quite expensive and sometimes it’s better to create what you have to and make one append.

If you have to do DOM operations, I recommend you have a look at the jQuery library – it takes a lot of grunt work out of it (especially finding/traversing elements).