Question

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

然后我想添加一个句子给用户一个提示，例如“此下拉列表适用于xxxx，您可以将其用于xxx”。我决定用标签来做。所以我创建了一个标签。但我不想将标签添加到下拉列表后面的单独单元格中。我想在下拉列表后面添加标签。所以我再次使用appendChild（）添加标签并在同一个单元格中选择 - 首先附加select，然后添加附加标签。但标签会在网页中的选择之前显示。

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

我是关于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 - 它需要做很多繁重的工作（尤其是查找/遍历元素）。

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

1 个答案: