I have many many lines of HTML content that I need to insert into a document using JavaScript. What the best way to do this? I don't want to have it broken out line by line in the source code, and not all stuffed together in a string.
Best way is not to do that.
Put those in static html files, and link it.
Have your Javascript code make an AJAX request to the web server for the file that contains the script. When the AJAX request comes back, write the contents of the reply to the InnerHTML
member on the document (or the document child that should contain the text).
This page gives a working example of exactly what you want to do - just replace the CGI with a static file containing the content you want to include.
Use can use jquery. Eg:
If you have a div with ID = "Sidebar". To load html content with jquery:
$("#Sidebar").HTML("whatever html content");
http://docs.jquery.com/Attributes/html
You can use jQuery AJAX methods to get the content asynchronously and then use the above method to load it in html.
You can use an iframe to load the html and use JS to take a part of it in your main page.
This Page (main.html)...
<html>
<head>
<title>Main</title>
</head>
<body>
<iframe id="loader" style="display:none"></iframe>
<div id="target"></div>
<script>
function read(b){
document.getElementById('target').innerHTML = b.innerHTML;
};
var ifr = document.getElementById('loader');
ifr.src = 'testIfrLoad.html#read';
</script>
</body>
</html>
...loads the content of this one (testIfrLoad.html):
<html>
<head>
<title>testIfrLoad</title>
<script>
function send(){
top[window.location.hash.substr(1)](document.body);
}
</script>
</head>
<body onload="send()">
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</body>
</html>