Как я могу добавить метку после выбора в той же ячейке таблицы?

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.

Если честно, я бы посмотрел на то, что вы делаете в первую очередь. Если возможно не генерировать HTML с использованием JavaScript, я бы порекомендовал сделать это. Если вам нужно показывать только определенные элементы в зависимости от того, что делает пользователь, лучше иметь все и показать / скрыть необходимые биты. Или, если вы можете загрузить HTML из внешнего источника и добавить туда, где вам нужно, это было бы лучше.

Операции DOM в JavaScript довольно дороги, и иногда лучше создать то, что вам нужно, и добавить один раз .

Если вам нужно выполнить операции DOM, я рекомендую вам взглянуть на библиотеку jQuery - она ​​требует много работы (особенно при поиске / обходе элементов).