How can we put a block of code into a variable using js and then use it wherever its necessary

I am doing a project of developing a website. The website is still static. However I require help for the following problem.
As i am still developing the website, i tend to change the header and footer of the website frequently. However this becomes a problem as I, after editing the header or the footer at one webpage, have to copy and paste the same on every other webpage of my website. I bore that initially, however, now as my number of webpages increases, this is becoming a huge trouble, as i have to spend a lot of time doing this thing. I learnt that storing block of data into a variable is possible and then tried to search for videos and stuff for the same. However I didn’t find anything useful. So it would be very beneficial if someone could help me understand how to create the code into a variable using Javascript.
Thank you!

1 Like

Using JavaScript to solve this requires more work than this post is going to answer.

The solution you seek is called a template. This is achieved by creating a backend that renders the front end.

For now, please ensure that you are not creating a different stylesheet for each new page. By doing this, you are consolidating your code, allowing you to change it once to update numerous pages.

If you are already doing this and the issue is surrounding changing the HTML structure or content, then you probably shouldn’t be at the point of creating content pages yet. Tackle it section by section the way you would have to even if you had a template already in place.

Build a template.html file that has the obvious things in it. a <header> element with perhaps a clickable logo image, a <nav> with common links in it. Add a <main> tag and then some typography tags like <h1>'s, <p>'s and etc. Be sure to add some placeholder text in them in order to style after. Add some images, tables, bulleted lists (<ul>), and ordered lists (<ol>), add structures to it. The more content you add to this main tag the more you will have to style later, but the more that will be styled later as well. Don’t forget to add a <footer> element to the bottom with common links, a copyright, etc.

Consider that every page on your site will eventually be rendered by a template. The content of a page is usually only a collection of text, images, and diagrams. By creating a template file now, you can tackle the design problem that at the very least will leave you with a more consistent header and footer.

Just my thoughts on the issue you are facing. To answer your question, yes you can use JS to store your header/footer into a variable and then render it later as well, but it’s not recommended in production. An example is below of how to use vanilla JS to render a header and footer.

const newEle = (ele, content) => {
    let div = document.createElement(ele)
    div.innerHTML = content
    return div
} // a function that creates a element and fills it with content then returns that element
const header = 
`
<img src="logo.png" alt="logo">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
`; // header content
const footer = `
<img src="footer_logo.png" alt="footer logo" />
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
` // footer content
document.body.prepend(newEle('header',header)); // places the header at beginning of body tag
document.body.append(newEle('footer',footer)); // places the footer at the end of the body tag