在同一表格單元格中進行選擇后，如何添加標簽？

Question

我想在網頁中顯示一些下拉列表，因此我使用document.createElement（）方法創建了表，表主體，行和單元格。 然后創建select元素，並使用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操作非常昂貴，有時最好創建所需的內容並追加一個 。

如果必須執行DOM操作，我建議您看一下jQuery庫 -它需要花費很多精力（尤其是查找/遍歷元素）。