title: Building HTML (~= DOM) using jQuery
body: <p>I may be doing something wrong, but I haven't been able to find a good way to build basic HTML/DOM structures, like lists, dynamically. Simple example would be building a table (table element, row, cells, with properly escaped text content) given input like json (objects).</p>
  
  <p>The problem I have is that most calls (like ".append()", ".html()", ".text()") do not seem to chain in intuitive (to me, anyway) way. For example, you <strong>can't</strong> do something like:</p>
  
  <pre><code>$("#divId").append("&lt;table&gt;").append("&lt;tr&gt;").append("&lt;td&gt;").text("some text");
  </code></pre>
  
  <p>text() call seems to wipe out content at main level; and appends likewise add stuff within same scope. I would expect appennd() to return content being added, but it seems to be returning its own context.</p>
  
  <p>I know there is simple "appendText()" extension that helps with last part. But how about others? </p>
  
  <p>For what it's worth, right now I revert back to DOM, by something like</p>
  
  <pre><code>$("#divId")[0].appendChild(document.createElement("table"))....
  </code></pre>
  
  <p>but that's pretty verbose.</p>
  
  <p>So I am hoping I am missing something totally obvious... but what? Call other than append()?</p>
  
  <p>I tried browsing jQuery reference docs, googling, but most docs just use "embed all stuff in a string"; which has problems, including that of not quoting textual content properly.</p>
  
  <p>(also: no, this is not a dup of <a href="https://stackoverflow.com/questions/337352/jquery-build-html-in-memory-rather-than-dom">"JQuery: Build HTML in ‘memory’ rather than DOM"</a></p>