當通過javascript動態添加html時，分離Javascript和Html

Question

我目前正在為列表應用程序構建一個非常動態的表，它將基本上通過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的情況下快速修改設計。

對這樣的方法有什么建議嗎？

Answer 1

看看John Resig的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。 因此，如果您具有清除惡意內容輸入的功能，則可以在這些<% %>標記內調用它。

Answer 2

抓住它，對其進行字符串替換，然后將其放在頁面中的正確位置。

字符串替換？ 如果它在頁面中，那么你已經有了一個DOM節點。 沒有必要將您的節點序列化為HTML字符串，將其破解並將其重新解析為DOM節點。 這種方式就是瘋狂和跨站點腳本安全漏洞，因為你忘了逃避HTML的文本。

相反，使用cloneNode獲取DOM對象的副本，更改所需的位，並將其添加到文檔中。

<style type="text/css">
    .hidden { display: none; }
</style>

<table id="sometable">
    <tr class="hidden"><td>-</td><td>-</td><td>delete row</td></tr>
</table>
<input type="button" id="sometable-newrow" value="New row"/>

<script type="text/javascript">
    var recordn= 1;

    document.getElementById('sometable-newrow').onclick= function() {
        var table= document.getElementById('sometable');
        var tr= table.rows[0].cloneNode(true);

        tr.className= ''; // remove hiddenness
        tr.cells[0].firstChild.data= 'record-'+recordn;
        tr.cells[1].firstChild.data= 'I am line '+recordn;
        tr.cells[2].onclick= removeRow;

        table.rows[table.rows.length-1].parentNode.appendChild(tr);
        recordn++;
    };

    function removeRow() {
        var tr= this.parentNode;
        tr.parentNode.removeChild(tr);
    }
</script>