How to add content from file using jQuery?

Question

I have main html document:

<html><head></head>
<body>
    <div id="content">
    </div>
</body>
</html>

Also I have a content file (not the html document, just html code):

<div class="CodeRay">
<div class="code"><pre><span class="no">   1</span> require
....
</pre></div>

I want to add the content file to html document like here:

<html><head></head>
    <body>
        <div id="content">
            <div class="CodeRay">
            <div class="code"><pre><span class="no">   1</span> require
            ....
            </pre></div>
        </div>
    </body>
</html>

How to use jQuery to accomplish this task? Also I need to run this site localy. Thanks.

EDIT: Locally means like this "file:///E:/Work/ReadTheCode/main.html"

Vap0r · Accepted Answer · 2011-05-30 22:06:40Z

9

Use jQuery's .load() function. The code would probably look something like this:

$(document).ready(function(){
  $('#content').load('contentFile.html');
});

If you need more info, here is the link to jquery's load documentation.

answered May 30, 2011 at 22:06

Vap0r

2,6283 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

megas Over a year ago

Chrome says "XMLHttpRequest cannot load file:///E:/Work/ReadTheCode/content/base.html. Origin null is not allowed by Access-Control-Allow-Origin." I think it's because of XMLHttpRequest crossdomain

Ron DeFreitas Over a year ago

Since you want to use it locally, the paths should be relative to the document.

Vap0r Over a year ago

Yeah, don't point to file:///E:/Work... say if your current HTML file is in the ReadTheCode folder, your load should look like this: $('#content').load('content/base.html');

megas Over a year ago

I didn't make full path, it's a Chrome issue, in Firefox it works.

Dan · Accepted Answer · 2011-05-30 22:07:27Z

2

you can use something like this:

$('#result').load('ajax/test.html');

See: http://api.jquery.com/load/

answered May 30, 2011 at 22:07

Dan

3,8905 gold badges26 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to add content from file using jQuery?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related