how can I add a label after a select in the same table cell? <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>Thanks in advance.</p> <p>======================================================</p> <pre><code>if (request.readyState == 4 &amp;&amp; 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 &lt; 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 &lt; _tmp_option_list.length; yindex++) { _select.add(new Option(_tmp_option_list[yindex], yindex), null); } }catch (ex) { for (yindex = 0; yindex &lt; _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); } } </code></pre> <p>The generated html code is</p> <pre><code>&lt;td&gt; &lt;select is="GuestID"&gt; &lt;option&gt;xxxxx&lt;/option&gt; ..... &lt;/select&gt; &lt;label id="GuestID_Label2" for="GuestID"&gt;test1&lt;/label&gt; &lt;/td&gt; </code></pre> <p>The CSS code</p> <pre><code>label { font-weight: bold; text-align: right; width: 100px; display: block; float: left; clear: left; margin-right: 3px; cursor: pointer } </code></pre>