当通过javascript动态添加html时,分离Javascript和Html

我目前正在为列表应用程序构建一个非常动态的表,它将基本上通过AJAX执行基本的CRUD功能.

我想要做的是将视觉设计和javascript分开,以便我可以在不触及JS方面的情况下改变设计方面.这只适用于设计保持大致相同的情况(我希望将其用于快速原型设计)

这是一个例子.

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

现在,当我添加一条新记录时,我想插入一行新的html,但我宁愿不把这个html放到javascript文件中.

我正在考虑的是在桌子附近的页面上创建这样的行.

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

当我来添加新行时,我在页面中搜索带有id = template-row的标签,然后抓住它,对其进行字符串替换,然后将其放在页面中的正确位置.

只要设计没有根本改变,并且我保持占位符字符串相同,这意味着可以在不触及js的情况下快速修改设计.

对这样的方法有什么建议吗？

解决方法:

看看John Resig’s Micro-Templating.

使用：

<script type="text/html" id="row_tmpl">
    <tr><td><%=id%></td><td><%=content%></td><td>delete row</td></tr>
</script>

<script type="text/javascript" src="templating.js"></script>
<script type="text/javascript">
    (function(){
       var dataObject = {"id":"myid","content":"some content"};
       var html = tmpl("row_tmpl", dataObject);
       // do whatever you want with the new HTML...
    }());
</script>

笔记
由于有些SO用户使用这种方法正确地关注XSS攻击,我只想指出微模板功能提供了规避问题的方法. < %%>中的任何javascript标签将被执行.因此,如果您有一个清除恶意内容输入的功能,您可以在这些< %%>范围内调用它.标签.