/    Sign up×
Community /Pin to ProfileBookmark

Insert HTML in a div

Copy linkTweet thisAlerts:
May 08.2013

I am new to Javascript and the very first thing I’m trying to do is to have a footer html file which will load in to the footer div on all pages. I have found several different code examples online but none seem to be working. The one I am using right now is:

[CODE] <script type = “text/javascript” language = “JavaScript”>
$(‘#footer’).load(‘footer.html’);
</script> [/CODE]

The footer.html file is in the same location as the html file which this code snipped is being entered in to, and the div is <div id=”footer”>.

I have tried the above code in both the header and the body to no avail. The footer div remains empty. What am I doing wrong?

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@me10lee83authorMay 08.2013 — Btw, I'm using jquery. I had <script src="jquery-1.9.1.min.js"></script> as a seperate tag, I've updated the open tag above to <script type = "text/javascript" language = "JavaScript" src="jquery-1.9.1.min.js"> but no change
Copy linkTweet thisAlerts:
@JMRKERMay 08.2013 — This does not use JQuery at all.

See if you can use it to suit your needs.

See recommendations about external file creation.

<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;style type="text/css"&gt;
/* following should be placed in an external style sheet file */
#headerDIV { color:green; text-align:center; vertical-align:top; }
#footerDIV { color:green; text-align:center; vertical-align:bottom; }
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
// this would be located in an external JS file to be loaded by each page an called by:
// &lt;script type="text/javascript" src='Header_Footer.js' &gt;
var HeaderInformation = 'Information located in the HEADER&lt;p&gt;&amp;nbsp;&lt;/p&gt;';
var FooterInformation = '&lt;p&gt;&amp;nbsp;&lt;/p&gt;Information located in the FOOTER';
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div style="border:1px solid blue;"&gt; &lt;!-- this DIV tag is just for display, not needed --&gt;

&lt;div id="headerDIV"&gt;&lt;/div&gt;

&lt;h1&gt;Header and Footer Tests&lt;/h1&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;Body Of Information&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;

&lt;div id="footerDIV"&gt;&lt;/div&gt;

&lt;/div&gt; &lt;!-- this DIV tag is just for display, not needed --&gt;

&lt;script type="text/javascript"&gt;
window.onload = function() {
document.getElementById('headerDIV').innerHTML = HeaderInformation;
document.getElementById('footerDIV').innerHTML = FooterInformation;
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@me10lee83authorMay 08.2013 — Thanks that does work, but what about loading contents from an HTML file instead of a javascript file? (Ok to have the javascript itself in an external script file, but I'm trying something for a homework that will eventually need to be loading one html file into another with javascript)
Copy linkTweet thisAlerts:
@me10lee83authorMay 08.2013 — Also, I tried using your code with the external files and it doesn't seem to be working... here's what I have (all files are in the same ffolder)

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;link rel="stylesheet" href="test.css"/&gt;

&lt;script type="text/javascript" src='footer-test.js' &gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div style="border:1px solid blue;"&gt; &lt;!-- this DIV tag is just for display, not needed --&gt;

&lt;div id="headerDIV"&gt;&lt;/div&gt;

&lt;h1&gt;Header and Footer Tests&lt;/h1&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;Body Of Information&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;

&lt;div id="footerDIV"&gt;&lt;/div&gt;

&lt;/div&gt; &lt;!-- this DIV tag is just for display, not needed --&gt;

&lt;script type="text/javascript"&gt;
window.onload = function() {
document.getElementById('headerDIV').innerHTML = HeaderInformation;
document.getElementById('footerDIV').innerHTML = FooterInformation;
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

&lt;script type="text/javascript"&gt;
var HeaderInformation = 'Information located in the HEADER&lt;p&gt;&amp;nbsp;&lt;/p&gt;';
var FooterInformation = '&lt;p&gt;&amp;nbsp;&lt;/p&gt;Information located in the FOOTER';
&lt;/script&gt;

Using Firebug I can tell the browser sees the external script file, just the only info that shows on the page is the border box and the h1 and p info in the html file itself
Copy linkTweet thisAlerts:
@me10lee83authorMay 08.2013 — Ok just realized you don't put <script> in the script file (duh).

So only question is, how do I accomplish this where instead of the variables equaling a string, it loads an html file
Copy linkTweet thisAlerts:
@JMRKERMay 09.2013 — I'm not sure where you are heading with this. ?

You started out wanting to put a common header and footer into each individual HTML file.

Now you seem to be wanting to load in a whole new HTML page ???

It would be easier to chain the HTML files rather than load them into an existing file.

You could also use <iframe> tags to load in a existing page, but that would be more than just headers and footers.
Copy linkTweet thisAlerts:
@me10lee83authorMay 09.2013 — I got it to work, below is the code. Problem was my footer.html file had <html>, <body>, etc tags in it, instead of just the text and any span tags.

The assignment is to load create a header, footer, and nav html files, then load those html file in to every web page on the site. So while the Javascript method you suggested does accomplish the same thing in the end, it doesn't meet the requirments for the assignment. But thank you for your help, I learned another way of doing it, and that's always a good thing!

&lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;div id="footer"&gt;&lt;/div&gt;
&lt;script&gt;
$("#footer").load("footer.html");
&lt;/script&gt;
Copy linkTweet thisAlerts:
@PadonakMay 09.2013 — i think that SSI language was mentioned in your assingment but not javascript
Copy linkTweet thisAlerts:
@JMRKERMay 09.2013 — I got it to work, below is the code. Problem was my footer.html file had <html>, <body>, etc tags in it, instead of just the text and any span tags.

...
[/QUOTE]

Difficult to see your problem when you did not include your code in your initial post.

My offer was just SWAG (Scientific Wild A** Guess) at your stated requirements.


Glad you got it solved.
×

Success!

Help @me10lee83 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...