title: createElement - select boxes interspersed in the midst of text
body: <p>This is the HTML I'm trying to create:</p>
  
  <pre><code>&lt;td&gt;
  Tiana is
  &lt;select name="U4"&gt;...&lt;/select&gt;
  keen to go to the
  &lt;select name="J4"&gt;...&lt;/select&gt;
  market.
  &lt;/td&gt;
  </code></pre>
  
  <p>As you can see, there is a <code>&lt;td&gt;</code> element which contains a prose sentence with select boxes in the midst of it.</p>
  
  <p>It's easy to do with <code>$('#id').html(...);</code>. What I want to do is build it using <code>createElement</code>. How do you create the select boxes <em>in the middle</em> of the other text? The following code is a start :)</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>BTW: I recognise, too, that I'll have to create the <code>select</code> options.</p>
  
  <p>Thanks.</p>