CODEWITHSUNDEEP
javascriptdom
Mark
Mark

Reputation: 21

using JavaScript to insert a lot of html content into a document

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.

Upvotes: 1

Views: 911

Answers (4)

Mic
Mic

Reputation: 25164

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>

Upvotes: 0

A G
A G

Reputation: 22587

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.

http://docs.jquery.com/Ajax

Upvotes: 0

Dathan
Dathan

Reputation: 7446

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.

Upvotes: 1

YOU
YOU

Reputation: 123841

Best way is not to do that.

Put those in static html files, and link it.

Upvotes: 0

Related Questions