如何在同一个表格单元格中选择后添加标签？

Question

我想在网页中显示一些下拉列表，所以我用 document.createElement() 方法创建了表格、表格主体、行和单元格；然后我创建选择元素并使用 appendChild() 方法将它们添加到单元格中。网页可以显示下拉列表。

然后我想添加一句话给用户一个提示，比如“这个下拉列表是给xxxx的，你可以用它来给xxx”。我决定使用标签来做到这一点。所以我创建了一个标签。但我不想将标签添加到下拉列表后面的单独单元格中。我想在下拉列表之后添加标签。所以我再次使用 appendChild() 添加标签并在同一个单元格中选择 - 首先附加选择，然后附加标签。但是标签显示在网页中的选择之前。

然后我尝试将标签作为选择的子节点附加到选择。然后标签消失。只显示选择。

我是 HTML/Javascript/DOM 的新手。也许我的想法从一开始就错了。有没有人可以给我一种方法来实现我的要求？我只想在下拉列表后添加一句话。

提前致谢。

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

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

生成的html代码是

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

CSS 代码

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

Answer 1

如果您能够将示例发布到您的代码中，这样我们就可以看到您的问题，这将非常有用。在 JavaScript 运行后，您是否能够查看页面的源代码？ （Chrome 能够做到这一点）- 只是为了确保元素在那里的顺序正确？

我已经根据我认为您正在尝试做的事情制作了一个 jsFiddle，而且它的顺序似乎是正确的（选择，然后是标签）。您是否有任何 CSS 样式或任何导致元素顺序发生变化的东西？

http://jsfiddle.net/nauFw/

将标签作为子节点附加到 select 将不起作用，因为它只能将 option 元素作为其子节点。

说实话，我首先会看看你在做什么。如果可以不使用 JavaScript 生成 HTML，那么我建议这样做。如果您只需要根据用户的操作显示某些元素，那么最好拥有所有内容并显示/隐藏必要的位。或者，如果您可以从外部源加载 HTML 并附加到您需要的位置，那就更好了。

JavaScript 中的 DOM 操作非常昂贵，有时最好创建你必须的东西和make one append。

如果您必须进行 DOM 操作，我建议您查看 jQuery library - 它需要大量繁重的工作（尤其是查找/遍历元素）。