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?

Solution 1

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!

Solution 2

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>

Solution 3

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.

Solution 4

If it's coming in from a link, you'll probably want to do it with AJAX:

$("#YOUR_ELEMENT").load("THE_CONTENT_TO_LOAD");

However, keep in mind if you're trying to pull HTML from a site on a different domain you'll need to use server proxies and all that stuff...kind of out of the scope of the question.

Solution 5

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.

View more solutions

Comments

[Pekka]

Please show the exact code of your html() command and the HTML you're injecting it in.

[saturngod]

where is your html ? May be sometime wrong in html data and need to check.

[Erik Escobedo]

Where are your LOTS_OF_HTML_CODE coming from? Maybe you could escape it with your server side script.