I don't favour using innerHTML in my own code, perhaps because I'm a crotchety old bugger who aims to do things that are right (morally), but using innerHTML certainly is more and more tempting now.

There is only one good reason that I know of now to not use innerHTML, and that's due to it bring HTML code in to your JavaScript, for which a separation of concerns should be maintained if at all possible.

Logic_Ali
—
2013-07-06T23:24:31Z —
#9

Pullo said:

So would you recommend using createElement, createTextNode and appendChild and co?

Yes, but only within a function written to simplify the whole process required.

Paul_Wilkins
—
2013-07-06T23:25:37Z —
#10

Pullo said:

So would you recommend using createElement, createTextNode and appendChild and co?

I would recommend using a template. Where the HTML structure is maintained as hidden elements on the page, and the script retrieves that template and uses it as a basis for which to update the page.

We will soon have a <template> tag too. A good read about them can be found in this article on HTML's New Template Tag

As a measure of backwards-compatibility, we can also use a smattering of CSS to hide such templates when making use of them now with our code.

template { display: none; }

I'll come up with an example of using them with the above code, sometime tomorrow as I have to shortly head away offline.

Paul_Wilkins
—
2013-07-07T00:06:53Z —
#11

paul_wilkins said:

I'll come up with an example of using them with the above code, sometime tomorrow as I have to shortly head away offline.

In fact, I can do it now.

We can add a template for the files section, anywhere on the HTML page but I would choose to place it just at the start of the <body> tag

Although, more complex situations are easier when using querySelector, so that can be a good reason to include the polyfill.

Pullo
—
2013-07-09T18:29:30Z —
#14

Hi Paul,

I've been playing about with this for a while now, but unfortunately I cannot get the querySelectorAll pollyfill to work.I know it's not strictly necessary, as the same functionality could be acheived using getElementsByTagName, but nonetheless I would be interested to hear your thoughts.

The exact error I receive is:

SCRIPT438: Object doesn't support property or method "querySelector"
HTML5_template.html, Line 112 Character 11

Yes, that's happening because IE7 doesn't have an Elements object from which to inherit things like querySelector.You may find it easier to experiment in a more recent IE with the F12 debug screen set as IE7.

I suspect that the only solution for compatibility there is to refrain from using querySelector on partial searches, and use things like getElementsByTagName instead.

It may also be feasible to use a separate function for the task, such as get.one(fileInput, 'span', 'tag') which can attempt the querySelector method, and if it fails then attempt other compatible methods.

It's always the case though that the further back you go, the more difficult it is to retain modern techniques, and have to resort to facades behind which the work gets done.

Paul_Wilkins
—
2013-07-10T07:26:02Z —
#16

Due to how IE7 and earlier have troubles with querySelector on unattached elements, I thought that I had found an effective way by adding the content from the template to the page first, then querying the page for that added section. But to no avail.

If you want compatibility with IE7 and earlier, we are restricted to using querySelector to retrieve elements from the page, and should only use querySelector to attain references from the already existing document.

Which is fine - getElementsByTagName and other methods are just perfect for editing the clones template.

Pullo
—
2013-07-19T07:12:58Z —
#17

Thanks!I've just been going over this now and it has helped me formulate my thoughts a bit more clearly on backwards compatibility.