I am currently building a very dynamic table for a list application, which will basically perform basic CRUD functions via AJAX.

What I would like to do is separate the visual design and javascript to the point where I can change the design side without touching the JS side. This would only work where the design stays roughly the same(i would like to use it for rapid protyping)

Here is an example.

<table>
<tr><td>record-123</td><td>I am line 123</td><td>delete row</td></tr>
<tr><td>record-124</td><td>I am line 124</td><td>delete row</td></tr>
<tr><td>record-125</td><td>I am line 125</td><td>delete row</td></tr>
<tr><td>add new record</td></tr>
</table>

Now, when I add a new record, I would like to insert a new row of html, but I would rather not put this html into the javascript file.

What I am considering is creating a row like this on the page, near the table.

<tr style='visble:none;' id='template-row'><td>record-id</td><td>content-area</td><td>delete row</td></tr>

And when I come to add the new row, I search the page for the tags with the id=template-row , and then grab it, do a string replace on it, and then put it in the right place in the page.

As long as the design doesn't shift radically, and I keep the placeholder strings the same, it means designs can be quickly modified without touching the js.

Can any give any advice on a methodology like this?