1

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 :)

August Tengland
  • 91
  • 6
  • Here you have [MDN great documentation](https://developer.mozilla.org/en-US/docs/Web/Web_components) about web component. Is it possible for you to choose a framework (Angular, vue.js, react) ? Because all these frameworks are made to create dynamic web app quicly and in a consistent way. – dun32 Feb 06 '19 at 15:51
  • Possible duplicate of [How to package, or import Html-Templates without Html-Imports](https://stackoverflow.com/questions/52791470/how-to-package-or-import-html-templates-without-html-imports) – Supersharp Feb 06 '19 at 23:48
  • or https://stackoverflow.com/q/52435955/4600982 – Supersharp Feb 06 '19 at 23:48
  • @Supersharp Thanks for the responses. Right now I'm currently using: $('#form-container').load('login-form.html'); And it seems to be working, are there any drawbacks to this method that might make your suggestions more viable? – August Tengland Feb 07 '19 at 10:41
  • @dun32 Thanks for the response. I don't have any practice working with frameworks and for this project I don't think I have the time to sink my teeth into it. Implementing html content is not even mandatory but I'd like to do it as a side project (the main focus is storing data in mysql and building some sort of website) – August Tengland Feb 07 '19 at 10:45
  • @AugustTengland You are using jQuery which is a sort of wrapper for utils fonctions. Vanilla JS is always more viable than any 3rd-party library but it's a very personal opinion – Supersharp Feb 07 '19 at 14:41
  • @Supersharp Alright I think I got it. For this project I'll be taking the easy route and stick to jQuery but I'll consider what you said in the future. – August Tengland Feb 09 '19 at 11:04

1 Answers1

0

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.

Tino T.
  • 26
  • 1
  • 5
  • Thanks for the response and sorry for an even later reply. I ended up switching from plain HTML to EJS and use res.render() in node to pass some data. I then use that data in combination with EJS include function to import different parts of the web page. It has worked fine for me but if the goal is to use simple HTML then your solution is probably a good way to go. – August Tengland Mar 31 '19 at 20:01