CODEWITHSUNDEEP
javascriptcsshtml
4thSpace
4thSpace

Reputation: 44312

How to reuse footer with only HTML/CSS?

Is there some solution that will allowing reusing a footer on multiple pages if all you have is HTML/CSS and perhaps javascript?

Upvotes: 5

Views: 11123

Answers (5)

Thomas
Thomas

Reputation: 156

You could place your footer HTML in a separate file, and then use javascript to load the HTML content of that file, and append it to a div in your page.

$("#footer").load("footer.html");

Like so: https://plnkr.co/edit/J8qc8221kal11BcPbALj?p=options

Upvotes: 9

Abdul Mannan - Data Engineer
Abdul Mannan - Data Engineer

Reputation: 1092

Place your code in some html file and then use jquery to include in the file you want. jquery .load() loads data from your server.

$('#targetContainerID').load('path/to/html/reuse.html');

Have a look at HTML Templates as well.

Upvotes: 5

dnviveros
dnviveros

Reputation: 60

there is a way, with HTML import, but this is not supported by all browsers.

HTML imports

caniuse

Upvotes: -1

Rhys Bradbury
Rhys Bradbury

Reputation: 1707

You could use React.js. you could use server side templating. You could use Javascript and Jquery .appendChild or javascipt native element.innerHtml eg:

document.getElementById("footer").innerHtml = ....

Upvotes: -1

Sarah Groß
Sarah Groß

Reputation: 10879

Save the markup for the footer in the JS or make the JS load it from a file via Ajax, make it append the footer to the page and include the JS in every HTML file.

Upvotes: 1

Related Questions