javascript - createElement - テキストの中に点在する選択ボックス

Question

これは私が作成しようとしている HTML です。

<td>
Tiana is
<select name="U4">...</select>
keen to go to the
<select name="J4">...</select>
market.
</td>

ご覧のとおり<td>、途中に選択ボックスがある散文を含む要素があります。

で簡単にできます$('#id').html(...);。私がやりたいのは、を使用してビルドすることcreateElementです。他のテキストの真ん中に選択ボックスを作成するにはどうすればよいですか? 次のコードはスタートです:)

var doc = document,
    fr = doc.createDocumentFragment(),
    td = doc.createElement("td"),
    sel1 = doc.createElement("select"),
    sel2 = doc.createElement("select");

td.innerHTML = "Tiana is keen to go to the market";

sel1.name = "U4";
sel2.name = "J4";  

fr.appendChild(td);
td.appendChild(sel1);    // But these are not in the middle of the sentence
td.appendChild(sel2);

ところで: 私も、selectオプションを作成する必要があることを認識しています。

ありがとう。

Answer 1

単純なテキストをコンテンツとして作成するためのcreateTextNode()（MDN docu ）と呼ばれる関数もあります。したがって、1つの解決策は、それに応じてテキストを分割し、テキストノードに変換してから追加することです。

var doc = document,
    fr = doc.createDocumentFragment(),
    td = doc.createElement("td"),
    sel1 = doc.createElement("select"),
    sel2 = doc.createElement("select"),
    text1 = doc.createTextNode( 'Tiana is ' ),
    text2 = doc.createTextNode( ' keen to go to the ' ),
    text3 = doc.createTextNode(  'market' );

sel1.name = "U4";
sel2.name = "J4";  

fr.appendChild(td);
td.appendChild( text1 );
td.appendChild(sel1); 
td.appendChild( text2 );
td.appendChild(sel2);
td.appendChild( text3 );

ここにフィドルの例があります：link。

Answer 2

私はあなたがこれを持っている必要があると思います：

<td>
<span>Tiana is</span>
<select name="U4">...</select>
<span>keen to go to the</span>
<select name="J4">...</select>
<span>market.</span>
</td>

またはこれを行う：

td.innerHTML = 'Tiana is <select id="U4" name="U4" /> keen to go to the <select id="J4" name="J4" /> market';
var uOpt1 = document.createElement('option');
//Set option properties
td.getElementById('U4').appendChild(uOpt1); //etc

Answer 3