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.

Answer 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>