2

这是我要创建的 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选项。

谢谢。

4

3 回答 3

4

还有一个名为createTextNode()( MDN docu ) 的函数用于创建简单的文本作为内容。因此，一种解决方案是相应地拆分您的文本，将其转换为 textnodes，然后将其附加：

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

在这里您可以找到一个示例小提琴：链接。

于 2012-06-22T12:17:11.280 回答
1

我想你需要有这个：

<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
于 2012-06-22T12:17:27.923 回答
1
于 2012-06-22T12:24:38.313 回答