HTML to Javascript Converter

Put your HTML into the box at the left, then click on 'Convert' and follow the instructions given in the box at the bottom.


HTML→ ←Javascript


Combining scripts

Let us assume you have created two js-files using the form above: goodmorning.js and goodafternoon.js (to do so, you'll have to change the default 'included_js' that appears in the right hand box at the top).
The file goodmorning.js will look like:
goodmorning_js =
'Your HTML';

document.write(goodmorning_js);

And the file goodafternoon.js will look like:

goodafternoon_js =
'Your (other) HTML';

document.write(goodafternoon_js);

The files can be combined into a larger js-file by creating a new file goodday.js (or whatever name) which will contain everything we had in the original files except the document.write statements, so:

goodmorning_js =
'Your HTML';

goodafternoon_js =
'Your (other) HTML';

and then adding the following document.write (with the plus-sign) at the end:

goodmorning_js =
'Your HTML';

goodafternoon_js =
'Your (other) HTML';

document.write(goodmorning_js+goodafternoon_js);


Where do we put the scripts?

Normally, scripts are put into the head section of a HTML document. But if we want to include external HTML/JS/CSS created with the help of our form at a given place of the body section of the HTML document, we can just put the script there.


Some notes on document.write

The script used here to create JS out of HTML/JS/CSS (see source) relies on document.write. Now, it is often said that document.write is evil and that, therefore, we should avoid it. There may be a misunderstanding there. We should distinguish indeed between evil use of document.write and document.write itself. The brute force of document.write allows us, for instance, to include whole external files into a document, together with all the sections of the external files: html-section, head-section, body-section, meaning that we may end up with more than one html-section, head-section etc. in a document. Note however that, if that would be the result of applying document.write to a document, the blame would not be on document.write itself, but on the way we've used it.

Another type of criticism on document.write concerns the fact that it can be used, and is actually often used, as storing code (css, js) into strings. Here again, the criticism pertains to the way document.write is (can be) used, not to document.write itself: if you don't want to use document.write for representing code, then don't. As a matter of fact, the requirement according to which document.write should only be used for storing pure data, not for storing code, is not justified by what common practice shows us in PHP functions and in JSON. If you know what you are doing, storing code in strings will not result in something that is necessarily bad. (The question whether representing code as a string is 'bad style' is another matter, of course. Anyhow, bad style that is not insecure is not really bad, IMHO).

I don't say that there are no cases in which document.write causes problems (although I didn't encounter them yet on my own test pages). But if you apply it with wisdom, there shouldn't be a problem. Note also that document.write is very fast and allows us to 'automatically' import virtually anything. (Automatically (!) importing JS and CSS with the help of valid DOM-methods is very hard to accomplish).

Arie Molendijk, molendyk.tk.