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

Question

Я хочу отобразить несколько списков на веб-странице, поэтому я создал таблицу, тело таблицы, строку и ячейку с методом document.createElement(); то я создаю элементы select и добавляю их в ячейки с помощью метода appendChild(). На веб-странице могут отображаться выпадающие списки.

Затем я хочу добавить предложение, чтобы дать пользователю подсказку, например «Этот список для xxxx, и вы можете использовать его для xxx». Я решил использовать ярлык, чтобы сделать это. Поэтому я создаю ярлык. Но я не хочу добавлять ярлык в отдельную ячейку за раскрывающимся списком. Я хочу добавить ярлык сразу после выпадающего списка. Поэтому я снова использую appendChild(), чтобы добавить метку и выбрать в той же ячейке. Сначала добавьте 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 элементы в качестве своих детей.

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

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

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