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 ) 的函数，用于创建简单文本作为内容。因此，一种解决方案是相应地拆分您的文本，将其转换为文本节点，然后也附加它:

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 );

在这里您可以找到一个示例 fiddle :link .