Convert static HTML page to dynamically generated jQuery

Question

I have an odd requirement where we have static html/css/images. I then need to convert these static pages into pages that are dynamically generated with javascript/jquery. We are dealing with 100+ instances of this.

So for example:

<div id='foo' title='my title'>Hi there!</div>

would be converted to:

$('<div/>', {
    id: 'foo',
    title: 'my title',
    text: 'Hi there!'
}).appendTo('#mySelector');

Is there a way to do this programmatically? I googled around but was not able to find anything.

This seems like a very strange thing to do. You should generally try to do as much as possible with static HTML, and only use Javascript for the parts that need to be generated dynamically, like tables based on runtime data. — Barmar
– Barmar, Commented Feb 14, 2015 at 2:00
You don't need to use objects like that, you can simply do $("#mySelector").append("<div id='foo' title='my title'>Hi there!</div>");. This keeps most of the structure of the original HTML. You may be able to do this with global replace in the editor. — Barmar
– Barmar, Commented Feb 14, 2015 at 2:02
i know it is odd. We have an odd requirement. That is why I'm asking the question. — Alexis
– Alexis, Commented Feb 14, 2015 at 2:09
Unfortunately, you're asking in the wrong place. Third-party software recommendations are explicitly off-topic. — Barmar
– Barmar, Commented Feb 14, 2015 at 2:10
You could load a script that parses the DOM into a json string, and then manually copy and paste that to save your own .json file. From there, you could use JavaScript to load the pieces from the .json file you want into the DOM. — user3886234
– user3886234, Commented Feb 14, 2015 at 2:52

Anthony Carbon · Accepted Answer · 2015-02-14 02:16:25Z

1

Something like this?

<div></div>

$('div').append('<p></p>');
$('div p').attr({
    'id':'foo',
    'title':'my title'
}).text('Hi there!');

OUTPUT :

<div><p id="foo" title="my title">Hi there!</p></div>

edited Feb 14, 2015 at 2:16

answered Feb 14, 2015 at 2:04

Anthony Carbon

6181 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexis Over a year ago

I want to go the other way. HTML -> JS

Alexis Over a year ago

yeah. And I'm looking for a way to automate it

Collectives™ on Stack Overflow

Convert static HTML page to dynamically generated jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related