Insert html using jquery .html()

Question

I want to insert a large chunk of html into a pre-existing <td>. I am using this method:

 $("td#content").html(LOTS_OF_HTML_CODE_HERE);

But it doesn't work. I am a noob, there are a lot of quotes and ' within the HTML chunk that seems to be breaking it. What is the correct method for doing this?

Answer 1

What I would do is to put all of that HTML into a div as per: <div id="myHTML" style="display: none;">LOTS OF HTML HERE</div> then when do this:

$("td#content").html($("#myHTML").html());

What could be the problem is line breaks. If you have a string (enclosed in "" or '') then you will find that line breaks will "break" your code... so you'll have to put all the HTML on one line.

Answer 2

If quotes are breaking your code, try this...

$("td#content").html("<a href=\"http://www.example.com\">my link</a>");

The quotes are not being escaped. Just add a backslash before any quotes, double or single within your HTML code. That should do it. ;)

Answer 3

I would suggest unifying the html into one string... like so.

htmlStr = "";
htmlStr += "<p>some paragraph";
htmlStr += "<p>another paragaraph</p>";

$("#content").html(htmlStr);

this way you can see where your html is breaking down and it adds a lot of readability to javascript created content.

Also...

if there is content in this TD that you'd like to keep, I would use the append() jquery method.

---

the jquery documentation is your best friend!

Answer 4

Stefan is right, but to answer your question with quotes, don't forget to escape anything that would otherwise break it, so if you have html("<a href='#' onclick='dofunction("text")'>...etc..."); it needs to be html("<a href='#' onclick='dofunction(\"text\")'>...etc..."); in order for the double quotes to not be read literally.

Answer 5

You should probably be creating your elements with jquery, rather than in a big string. You get no certainty of dom correctness if you just use a big string, and it's near impossible to debug or modify.

This is similar to building xml by hand. It's just not the preferred way of doing it.

Answer 6

Javascript doesn't have good support for multi-line strings or HEREDOC syntax, but there are a few workarounds.

Add a backslash "\" to the end of each line to let the script engine know you are continuing onto the next line without finishing:

<script>
var my_html = '\
    <div id="my-div">\
        <span>Name:</span> Your Name\
    </div>\
';
</script>

Use an XML CDATA hack(http://mook.wordpress.com/2005/10/30/multi-line-strings-in-javascript/):

<script>
var my_html = (<r><![CDATA[

    <div id="my-div">
        <span>Name:</span>Your Name
    </div>

]]></r>).toString();
</script>