How can I read line by line an HTML file and return document.write() for each line with Javascript?

Question

I have 3 files: index.html, header.js and footer.js.

I wonder if I can use just one JS script to read line by line the HTML files header.html and footer.html (files instead of header.js and footer.js) and return for each line of the file the document.write('line content');?

Instead of having header.js and footer.js I want to have header.html and footer.html and one JS file for transforming the HTML into JS file: header.html transformed into header.js.

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<script type="text/javascript" src="header.js"></script>

<!-- CONTENT -->
<div id="content">
<h1>Title</h1>
<h2>Substitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- END OF CONTENT -->

<script type="text/javascript" src="footer.js"></script>

</body>
</html>

header.js

document.write('<!-- HEADER -->');
document.write('<div id="header">HEADER</div>');
document.write('<!-- END OF HEADER -->');

footer.js

document.write('<!-- FOOTER -->');
document.write('<div id="footer">FOOTER</div>');
document.write('<!-- END OF FOOTER -->');

At the end the index.html will look like this:

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<script type="text/javascript" src="include.js?file=header.html"></script>

<!-- CONTENT -->
<div id="content">
<h1>Title</h1>
<h2>Substitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- END OF CONTENT -->

<script type="text/javascript" src="include.js?file=footer.html"></script>

</body>
</html>

The rest of the files will look like this:

header.html

<!-- HEADER -->
<div id="header">HEADER</div>
<!-- END OF HEADER -->

footer.html

<!-- FOOTER -->
<div id="footer">FOOTER</div>
<!-- END OF FOOTER -->

Please explain WHY - what is the actual reason for this? jQuery can easily grab content and insert on a page if the content comes from the same site as the page you want to assemble it on — mplungjan, Jan 22 '13 at 10:25

mplungjan · Accepted Answer · 2013-01-22T12:27:10.107

Please explain WHY youneed document.write - what is the actual reason for this? jQuery can easily grab content and insert on a page if the content comes from the same site as the page you want to assemble it on

For example

$(function() {
  var $body = $("body");
  $.get("header.html",function(data) {
    $body.prepend(data);
  });
  $.get("footer.html",function(data) {
    $body.append(data);
  });
});

that would make your page look like this

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="include.js"></script>
</head>
<body>
<!-- CONTENT -->
<div id="content">
<h1>Title</h1>
<h2>Substitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- END OF CONTENT -->
</body>
</html>

where include.js looks like what I posted above

If you do NOT want to use jQuery, you will need to ajax the pages in, convert your pages on the server using for example PHP or use iFrames to hold them

Example without frameworks:

DEMO

<!DOCTYPE HTML>
<html>
<head>
<title>Test header footer insertion without jQuery</title>
<script>
var pages = [
{url:"header.html",tag:"body",where:"before"},
{url:"footer.html",tag:"body",where:"after"}
];
var req,cnt = pages.length;
function ajax_fragment(){
    cnt--; if (cnt<0) return;
    if (!req) { // singleton
      if (window.XMLHttpRequest){
          req=new XMLHttpRequest(); 
      } else{ 
          req=new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    }

    req.onreadystatechange=function(){
        if(req.readyState==4 && req.status==200){
            var tempDiv = document.createElement("div");       
            tempDiv.innerHTML = req.responseText; 
            var fragment = document.createDocumentFragment();  
            fragment.appendChild(tempDiv);                     
            var tag = document.getElementsByTagName(pages[cnt].tag)[0]; 
            if (pages[cnt].where=="before") tag.insertBefore(fragment, tag.firstChild);
            else tag.appendChild(fragment);
            ajax_fragment(); // next 
        }
    }
    req.open("GET",pages[cnt].url,true); 
    req.send();
}
window.onload=function() {
  ajax_fragment();
}
</script>
</head>
<body>
<div id="content">Here is some content</div>
</body>
</html>

There is another method instead of using jQuery? I know it is stupid, but there is no reason not to use jQuery, this is very powerful tool, but the specification of the application exclude any form of framework. :( — , Jan 22 '13 at 10:38
I found this answer: var txtFile=new XMLHttpRequest(); txtFile.open("GET", "http://localhost/header.txt", true); txtFile.onreadystatechange = function() { if (txtFile.readyState === 4) { // document is ready to parse. if (txtFile.status === 200) { // file is found allText = txtFile.responseText; lines = txtFile.responseText.split("\n"); } else alert('File is NOT found!'); } else alert('Document is NOT ready to parse!'); } txtFile.send(null); document.write(txtFile.readyState); , but it return the msg. "Doc..." and the value 1 for readyState. — , Jan 22 '13 at 10:56
readyState=1 means uninitialized http://www.w3schools.com/jsref/prop_doc_readystate.asp — , Jan 22 '13 at 11:06
I recommend not to pay too much attention to w3schools. viz http://w3fools.com/ the example you found is simila to what I gave you at the end of my question - difference is that you do NOT need to read line by line, just insert the resulting html — mplungjan, Jan 22 '13 at 11:57

How can I read line by line an HTML file and return document.write() for each line with Javascript?

1 Answers1