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.

Crash browser when append too much html by jquery

I have a html page and using jQuery append new tr tag from content html of script tag.
Content html of script tag have too much html and when append a few times for table, browser tab will crash.
I have a description at https://jsbin.com/vufeyaz/2/edit?html,js,output
How to it can working?

Basically, everything is OK with your code. I think browser is just having troubles rendering all this HTML, and the number of times you are able click on Add Hero button depends on your computer's performance.
Also your approach isn't quite right. Try looking at Angular or something like this. By the way, you don't need to return false;
But if you stick to native JS, then add an id to <tbody> like <tbody id="t-body-id"> and replace the call $(this).parent().parent().parent().parent().find('tbody').append(content); with $('#t-body-id').append(content);

How to load the contents of a file and insert a variable in it using Javascript?

I'm adding some html to a div using the following jQuery method:
$('#pageTabContent').append($('\
<div class="tab-pane" id="'+ticketId+'">\
And a whole lot more html here..
</div>'));
This works fine, but because I've got way too much html in my javascript I want to move that to a separate file. The problem is that I also need to insert the ticketId in the html. Is there a way using Javascript/jQuery to load the html from a separate file, but still insert the ticketId in it?
[EDIT] Please note that the ticketId is different for every time this piece of code is used. I will be used multiple times within one page load, so I cannot load the ticketId in the html using php. I has to be done client side.
All tips are welcome!

For that specific example, it's pretty straightforward:
$.get("/path/to/file.html", function(html) {
var newStuff = $(html);
newStuff.find("div.tab-pane:first").attr("id", ticketId);
newStuff.appendTo("#pageTabContent");
});
You can generalize that a bit, the basic concept is: 1. Load the HTML, 2. Use jQuery to create DOM elements from it, 3. Use jQuery to find the element in question and modify it, 4. Add to the element.
Another approach is to use some form of templating, either a templating plugin or just DIY:
$.get("/path/to/file.html", function(html) {
html = html.replace("{{ticketId}}", ticketId);
$("#pageTabContent").append(html);
});
Again, there are plugins and templating systems to do that for you, which would offer various features over doing your own.

I generally recommend avoiding dynamic html generation in javascript.
There are several good template based frameworks out there. One I like to use in KnockoutJS http://knockoutjs.com/
Another benefit of this approach is change tracking between your model and your html elements.

How do I use small html markup repeatedly?

I am working on standalone JavaScript application which is being coded in HTML 5.
It has almost 50-60 html pages including repetitive markup such as header, footer and nav.
But if I have to make change in header then I have to make changes in 56-60 pages.
Is there any solution to use reusable html markup so if I did changes in one page it will reflect to other pages?
I can't even use php.

Prepare one javascript function. Write your html elements through javascript or jquery function. run it in page load event. and call the function in html by div.
Put this javascript function in separate .js file. And call this js file in wherever you want. And just place the div wherever you want in the html page.
See this jsfiddle DEMO
I Hope this demo will useful to you in this situation.

If you are using HTML (.html) pages and do not have Server-Side-Includes option then you can use a JavaScript template (which is not too difficult).
Second option : use of iframe.
Write the whole javascript code in common_layout.js
Add every statement using id of that div and add this file with main layout.
$( document ).ready(function() {
$('#header').html('<b>Header</b><ul><li>First Link</li><li>Second Link</li></ul> ');
});
UPDATE: One of my favorite post from TutsPlus : Best practices when working with JS Templates

If you are just started with this application. You can think of using client side java script frameworks like - AngularJS. It would be lot easier to maintain the code and solve such trivial issues.

You can use object tag like this:
<object name="header" type="text/html" data="header.html"></object>

better practice than document.write() to load foreign content in a Website?

I have a widget (some html code) that should be loadable on different Websites (which are not under my control) but the widget is hosted on my server.
Until now I had a PHP Script producing javascript code looking someting like this:
document.write('<div> ... some more dynamic html ...</div>');
which then could be loaded on any html page with the tag.
Now I'm planing a redesign and want to do the PHP part with server-side javascript. Do I still need to output document.write() or is there a more clever way now days, as we have handlebarjs, node.js etc. Also: I'd be interested I those new fancy autoupdate features frameworks like meteor or derby provide...
(I wanted to use meteor (meteor.com) to do the job but meteor outputs full html pages and I do not need a whole page)
Thank you for your help/sugestions

Now I'm planing a redesign and want to do the PHP part with server-side javascript. Do I still need to output document.write()
You have to output something that will cause the content to be rendered on the client.
The client side code will be more or less independent of the server side code (although you might get some cross-over if you start using tools such as mojito.
or is there a more clever way now days, as we have handlebarjs, node.js etc.
node.js won't help with what you output, since it is a server and the JS to modify the page has to run in the browser.
You could use a template language like handlebarjs. You could use a library to aid DOM manipulation. The problems are that the more code you load (libraries included), the more likely you are to clash with something used by the third party websites upon which your code is embedded, and the heavier you make their pages (and large increases in page weight are a particularly poor idea for secondary content).

When you want to add a new div to an existing HTML document, you should do so by inserting a new HTML element into the document tree.
// create a new div
var newDiv = document.createElement('div');
// put some text into it
newDiv.innerHTML = 'Hello World!';
// the div won't be displayed yet, because it only exists as a
// variable in limbo outside of the HTML document tree. We need
// to insert it into the document.
// First, we get the HTML node where it should be inserted
var parentDiv = document.getElementById('id_of_the_div_where_the_new_div_belongs_into');
// then we put it into that div
parentDiv.appendChild(newDiv);
When you want to insert the div at the end of the page (useful when the script is supposed to work on many different pages you have no control over) you can also insert document.appendChild().
When the new div doesn't just contain text but also other HTML nodes, you should also create those with document.createElement and attach them to the newly created div with appendChild.

Take a look on these: document.createElement, documentFragment