同じ表のセルで選択した後にラベルを追加するにはどうすればよいですか？

Question

私はいくつかのドロップリストをWebページに表示したいので、document.createElement（）メソッドを使用してテーブル、テーブル本体、行とセルを作成しました。 appendChild（）メソッドを使用してselect要素を作成し、セルに追加します。 Webページにはドロップリストが表示されます。

それから私は次のように、ユーザーにヒントを与えるために文を追加する「このドロップダウンリストがXXXXのためである、とあなたはxxxは、それを使用することができます」。私はそれをするためにラベルを使用することに決めました。だから私はラベルを作成する。しかし、私はドロップリストの後ろにある別のセルにラベルを追加したくない。私は、ドロップリストの直後にラベルを追加したいと思います。だから、もう一度appendChild（）を使ってラベルを追加し、同じセルで選択します。まず、select、2番目にラベルを追加します。しかし、ラベルはウェブページの選択の前に表示されます。

次に、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のスタイルや要素の並べ替えが少し変わってしまっていますか？それが唯一の子としてoptionの要素を持つことができるようselectに子ノードが動作しませんようラベルを追加は

http://jsfiddle.net/nauFw/

。

正直に言うと、私はあなたが最初の場所でやっていることを見ているでしょう。 JavaScriptを使用してHTMLを生成できない場合は、そのことをお勧めします。ユーザーが何をしているかに基づいて特定の要素のみを表示する必要がある場合は、すべてを持ち、必要なビットを表示/非表示にする方がよいでしょう。または、外部ソースからHTMLを読み込んで必要な場所に追加することができれば、それは良いでしょう。 JavaScriptで

DOM操作は非常に高価で、時にはそれが何をしなければならないとmake one appendを作成する方が良いでしょう。

DOM操作を行う必要がある場合は、jQuery libraryを見ることをお勧めします。これは、多くの不満な作業（特に要素の検索/移動）が必要です。