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?
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!
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>
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.
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.
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.
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.
You can also use the grave accent ( ` ), like that:
$("#menu").html(`
Options:
<a href="main.html">Home</a> |
<a href="list.html">List</a> |
Add |
Options |
<a href=# id="logout">Logout</a>
`);
html()command and the HTML you're injecting it in.