8

Does anybody know if there is a tool around that can convert html to javascript.

For example:

<div>
</div>

would convert to 

aDiv = document.createElement('div');
document.appendChild(aDiv);

etc

I'm am doing a few html templates for UI components and am using MooShell for prototyping. It would be great to be able to auto-generate the javascript that will build the component's html.

Thanks

grookle
  • 141
  • 1
  • 6
  • 1
    Interesting question. I think jQuery must have a built-in parsing engine for this, as it can accept commands like `$("
    ")` to build DOM objects. Maybe there is additional info there.     – Pekka Aug 19 '10 at 09:14
  • 1
    Interesting idea, but be aware that repeated DOM transactions, especially for large hierarchies, can be costly. – Konrad Aug 19 '10 at 09:15
  • And if the documents does not validate? Anyway it can be "easily" achieved with bruteforce regexping :) – Enrico Carlesso Aug 19 '10 at 09:20
  • I just saw BeautifulSoup, a python thing that parses html, even badly formed one – mplungjan Aug 19 '10 at 09:23
  • 1
    Pekka mentions a good point. You might try diving into the jQuery source code or digging up info on how the jQuery() function works. @Konrad: I suppose an approach similar to that recommended for jQuery could be taken--by constructing complex hierarchies in a single transaction rather than creating each individual element one by one. – Lèse majesté Aug 19 '10 at 11:08

5 Answers5

2

I'd suggest taking a look at John Resig's pure javascript HTML parser. It consists of a SAX style parser for HTML and includes an XML serializer, a DOM builder and a DOM creator. Each takes a string of HTML as input.

In particular, the HTMLtoDOM method could easily be repurposed to return the string of javascript required to build the DOM for any input string of HTML.

donalmacanri
  • 126
  • 2
0

If there was no such tool (which I highly think is the case), I would solve this problem the same old good way: build my own parser.

Khoi
  • 4,502
  • 6
  • 29
  • 31
0

I see other people have given you plenty of tips on how to do this, but my two cents on one thing to bear in mind.

If you are inserting/removing/modifying elements to/from the DOM using client-side Javascript, you will notice that with a framework such as jQuery, you will be unable to call and manipulate the DOM elements you have added in on the fly.

The best way round this is to look up using the jQuery Live plugin.

George
  • 901
  • 9
  • 23
0

The PrototypeJS Framework has an insert() method which is able to parse html code, so you can do something like:

$$('body')[0].insert(stringWithYourHTMLCode);

Or you define a container for your content:

$('containerId').insert(stringWithYourHTMLCode);
Christian
  • 1
  • 1
-2

I'm not sure about your situation, but if you have components in HTML they should have events, IDs and binding... So I don't think there is a human-like genius script that can generate this code. Add to that, your problem is very specific. It may be somewhere in some IT corporation, but it's not something that web developers uses daily like jQuery.

Omar Abid
  • 15,753
  • 28
  • 77
  • 108