Avoid repeating html code- not using PHP

Question

I imagine this will be quite easy for some. In order to avoid repeating code across different pages, I want to be able to add chunks of html code without writing out all of the elements. Kind of like a page controller for functions.

.clone() and .append() don't work because I want to work across pages. — Alex Silverman, Feb 26 '15 at 15:44
I am sorry for asking this, but I just want to know, why you want to achieve this without PHP. You might want to use javascript methods to achieve what you are looking for. — Leandro Papasidero, Feb 26 '15 at 15:46
javascript jquery but why not php it is logical choice and easy one too just saying — M.chaudhry, Feb 26 '15 at 15:48
Well, for one thing, I don't want to rename pages to .php. For another, I don't know php nearly as well as javascript or jquery. How can I use javascript here? Do I essentially need to "build" the html, and then call that same builder each time? — Alex Silverman, Feb 26 '15 at 15:51

Leandro Papasidero · Answer 1 · 2015-02-26T16:03:51.653

0

HTML1

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>

<!-- javascript/jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="repeat-div"></div>
</head>
<body>
<script type="text/javascript" src="repeat.js"></script>
</body>
</html>

HTML 2

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>

<!-- javascript/jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<h1 class="repeat-div"></h1>
</head>
<body>
<script type="text/javascript" src="repeat.js"></script>
</body>
</html>

JS (repeat.js)

$(document).ready(function(){
    $('.repeat-div').html("Hello");
});

edited Feb 26 '15 at 16:03

answered Feb 26 '15 at 15:53

Leandro Papasidero

3,728
1
18
33

this is repeating on the same page. I need to repeat across documents/pages. – Alex Silverman Feb 26 '15 at 15:54
you can move the javascript code into a standalone file and include the file on each page that you need to repeat the code. Check answer (edited) – Leandro Papasidero Feb 26 '15 at 15:59
I had thought of javascript "building" the html, but it becomes more burdensome when you have to build a lot of html. – Alex Silverman Feb 26 '15 at 16:42

score 0 · Answer 2 · answered Feb 26 '15 at 16:21

Javascript is not ideal for this, because not all browsers support Javascript, even though it is becoming more and more popular. It's always good practice to keep server-side code separate from client-side code, unless there's absolutely no way to avoid combining the two (which comes up more and more often with the rise of jQuery and similar libraries).

PHP includes do not require knowing very much PHP, and you would not have to rename every file to .php if you used them. You could configure your server (.htaccess file on Apache) to process all .html files as PHP. In fact, renaming individual endpoints is generally not a good idea once a site has been launched, because that may lead to broken backlinks on pages that have linked to you, and search engines will treat the renamed pages as new pages unless you specify permanent redirects on the old endpoint locations. You could also configure your server to use Server Side includes rather than PHP includes.

All this said, if you absolutely want to use Javascript for this, you could do something like:

<script src='includeFile.js'></script>

in every HTML file

Then in includeFile.js:

document.write('
  <header>
    HEADER //Example header text
    //Additional header text
  </header>
');

Avoid repeating html code- not using PHP

2 Answers2