Develop Reference

Importing / Changing HTML content (after ES6 update)

I have been trying to dynamically change the content of my HTML page by importing external HTML-files. I found a way to do this using HTML imports but if I have understood it correctly this feature is going to become obsolete in because of the ES6 update. From what I've manage to found online there could maybe be an alternative way to do this using javascript modules but I can't find anything concrete.
I want to be to change a big part of the page (a window containing a form becoming a window showcasing user statistics) so it doesn't seem smart to use .innerHTML in javascript. Does anyone have any good ideas on how to import html files or dynamically change the content of the page ? (using javascript, node, etc)
Any help much appreciated :)

I'm a bit late and the answer has already been linked to in the comments of this question, but here i go anyways.
You should be able to use Ajax to get the html file contents. (As a string)
With the content of the html file you should be able to parse it to a htmlDoc in JS (like the global document from document.getElement etc) using the DOMParser class.
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
https://codepen.io/Deefoozy/pen/PeYWge
After parsing the html into a htmlDocument you should be able to get the body through the result using .getElement or .body.children. The result of this should be a simple domNode which you can append to another domNode.

How do I create a link in HTML and CSS which will populate a div or other element with an html file?

It's been a long time since I last had to do any html, but one of the features that will apparently still work, but is not good practice, was to divide a page into frames and the you could use some sort of nav bar with all the page links to populate a targeted frame. eg.
clicky
I tried using the <iframe> tag, and although it's almost exactly what I want, I found it to be very frustrating to get it to autosize to the correct height depending on the content being loaded into it.
Obviously, I could just make an almost identical page but change the content on the new one and link from one to the other, but I have a rather nice css slideshow as my background for the site and I don't want it to reload every time a link is clicked!
Now, I'm loving stylesheets and divs, so is there any way to do the above without resorting to HTML 4? I'll take a javascript answer if there really is no way to do this in CSS and HTML 5.
Thanks in advance, you lovely people!

So, you just want to update the actual content, that differs? You could do it with iFrames, but this is not recommended at all.
The "new" way to use is called "AJAX"
It is a technique to download data from the server, without reloading the current page. This is done via JavaScript (and serverside PHP). That way you can update the page content only.
There are many tutorials on the web, also many common questions are answered on stackoverflow alreay. Feel free to check them out :)

JSP/Javascript: How to dynamically change a header based on the page im on

I have a header.jsp file that is included in all my pages on the website what acts as a template for all my header content (e.g site titles, logos, home links etc.). Inside this header.jsp I want to set up a page title in a h1 tag (for example) that would change to show the title of whatever page I am on when navigating through the pages of the website.
My initial thought was to use javascript to achieve this however based on the tutorials, most people are using frameworks like angular which I dont really want to resort to using unless there was no alternative. Is there any way I can change my headers to pick up whatever page I am on using raw JavaScript? Or, is there anything in jsp that can also make this possible? If so how can I achieve this?

How about setting the page title as a request attribute page_title and then fetching it in your header.jsp.

Thank you for the responses. I have managed to figure out one alternative that has worked for me though I wouldnt say it is the most graceful. (Any suggestions to improve this and I will update my answer for better understanding!) Also worth noting the solution was using jsp NOT javascript.
What I have done is within my header.jsp, I had set up in the body the following code between a div tag:
<%= subTitle %>
From there, I then applied the following code to all other pages on my website:
<% String subTitle="Example Page"; %>
'Example page' being the name of the webpage that I want to show on my header but it can be different on any page and had given me the expected results.
The only thing is however that in doing it this way, when it is set on Eclipse Luna I get a problem where 'subTitle cannot be resolved to a variable'. The code in itself works but it is problems like these that I would also rather resolve in order to provide the best solution. Any suggestions to remove this error would be appreciated.

Inserting Text Into HTML

What I Want: Very simply I have a C program that generates a variable periodically, I want to be able to display this value on a website.
Restrictions: The webpage is HTML, php does not work, javascript does [I have tried a few javascript solutions but they have all been long, tedious and in the end ineffective] I want it to be able to format the text so that it matches the rest of the webpage. Above all I'd really like to find something simple that works.
Freedoms: I can output the variable from my C program to just about any file type and content that I want, the file is hosted so is available locally to the server or online for the client.
Preferred Solutions: I am currently playing around with the object and iframe tags native to html. They give a nice simple input:
<object height=20 width=75 type='text/plain' border=0 data="URL/filename.txt"></object>
inserts the contents of my file, but it can't be formatted so I am stuck with 12pt Courier font which is not acceptable. Using
<iframe seamless height=20 width=75 scrolling='no' src="URL/filename.htm"></iframe>
and adding my desired font/colour/size etc to the htm file gets me the right text style, but htm has a large amount of white padding around it which I can't seem to get rid of so I have to make my iframe quite large for the text to be displayed, but then it doesn't fit smoothly with other text.
So anyone that can answer one of four questions:
How to remove excess padding from htm
How to format the style of a html object
Is there anything in Java as simple as the php [so apparently it doesn't show php code even when you quote it as code. But basically using echo and get_file_contents to insert the contents of a txt file into a html page]
Propose an alternate solution

Padding and style can be handled by css.
By java I assume you mean javascript - google-ing will help you. Without details of what your server is running and what is dispatching your pages we can't give you an exact answer. You might want something with ajax to keep it updating in the background.
Try googling your question, you'd be surprised how often this helps.

I'm not sure what you're trying to do once you get the variable into your web page, but I think something like the following could be useful.
Create a hidden div on your page
Have your C application write the variable to some file
Use jquery to execute an ajax call to pull that value into the div ( or whatever other container you want to use
using some type of timer, execute the ajax call every X period of time, which will then get your up to date variable
on your main page, have another timer that will then come in to that container, grab your value and then you are free to do what you want with it.
This is all off the top of my head without knowing much about what you're trying to accomplish. If you provide some further details we may be able to help you a little more.

You need AJAX... that's just a fancy buzz-word. It means you can tell JavaScript can get a file from the server without reloading the page and you can insert data from that file into your HTML.
AJAX is made much simpler by using a JavaScript library like jQuery, but it can be done without jQuery. There's a pretty decent Getting Started tutorial at Mozilla Developer Network if you want to do it the hard way, but I really recommend jQuery.
As far as formatting... any formatting... you need to use CSS. Just about everything about the appearance of anything on a web page is controlled by CSS. MDN has a Learn CSS section, too.

load jquery on you main html file
put a div with some id (example id="newvalue")
make you c program to write the output in a file (for example value.html)
on main html page header, after jquery include code add some javascript like
$( document ).ready(function() {
$("#newvalue").load('yoursiteurl/value.html');
});

Insert script into head part of the website using Greasyspoon

I have a javascript that I want to inject into a website header part using Greasyspoon. This javascript will take care of the mobile display of the website.
Is it possible to do so?

It's surely possible. I have inserted a simple alert() function into specific website. I think it proved you can make it with greasyspoon.