Using JavaScript to inject reusable content into webpages?

Question

I'm sorry if this is considered too general a question. I have a website that I'm creating from scratch and without any CMS or fancy tools. I have like 20 lines of HTML that compose the header that is the same on every page. So it seems logical that I should use document.write(header) inline where the header needs to be on each page, and before that have a way of grabbing the HTML for the header from a local HTML file.

Is this easy to do?
If so, what functions do I need?
Could you provide an example, assuming that the external file is called header.html?

Diodeus - James MacFarlane · Accepted Answer · 2014-09-18 17:17:02Z

1

You can do this using AJAX - on page load, insert the contents of some URL into a DIV. The problem with this technique is that it really sucks for SEO - crawlers will see that page without the loaded content.

NEVER use document.write because it stops page execution and can only be used effectively DURING load time, not AFTER.

answered Sep 18, 2014 at 17:17

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

2 Comments

user4055428 Over a year ago

What function should I be using if not document.write?

Diodeus - James MacFarlane Over a year ago

This: api.jquery.com/jquery.ajax You use .html() or plain old .innerHTML() to set the value in an existing DOM element.

Aldo Sanchez · Accepted Answer · 2017-05-16 20:49:35Z

0

It's probably much better/easier if you look into templating languages such as Handlebars.js.

answered May 16, 2017 at 20:49

Aldo Sanchez

4508 silver badges23 bronze badges

Collectives™ on Stack Overflow

Using JavaScript to inject reusable content into webpages?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related