StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBuilding HTML (~= DOM) using jQuery
text
Body
copied!<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("<table>").append("<tr>").append("<td>").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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload