高效率动态生成html

innerHtml和innerText

　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

尽量使用innerHtml，如果一定需要使用到innerText而不需要包含html的内容，需要进行的操作是：使用innerHtml获取后使用正则表达式去替换里面的html内容。

在Ajax横道的今天，我们在页面交互上有了更高的要求，动态生成HTML毫无疑问是其中的一种。动态生成HTML的方式多种多样，其核心不外乎在前段（JS）或者后端（C#/PHP…）将数据组装成我们想要的模版，最终通过一定的方法输出给用户（innerHTML、documentWrite等方式）。 

缺点 
1）拼接字符串的过程容易出错，常常忘了'/”>等匹配的符号。 
2）修改前台模版的同时容易遗忘同步更改动态生成的模版。 
3）拼接字符串不直观和美观，不利于查找错误，例如：数据中如果存在HTML内容，会导致种种麻烦。 
4）不能满足较高的业务逻辑需求，处理判断较为麻烦，例如：当A情况生成X模版，B情况生成Y模版。 
5）复用性低，较为相似的模版难以公用。 

最好的方法是使用模板去处理：

1）简单，直观的模版 
2）易于维护（方便查找错误，有代码着色等） 
3）模版的可复用性 
4）处理一定的逻辑判断 

定义的模板代码：

<script type="text/x-jquery-tmpl" id="testTemplate">
    /*模版代码*/
</script>

我把jQuery Tmpl的语法分为三大类：

1.显示类：

{{html }} / {{= }} / ${ }，这三个标签都能够将数据输出到模版中，但是{{html}}不会对数据进行编码，用于输出数据中的HTML代码段的，而{{=}}和${}则会对数据进行编码，防止数据对于模版结构的破坏。

js中的DocumentFragment() 纯增加性能的方法

document.createDocumentFragment()

说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。

 

var oui=document.getElementById("oItem"); 
for(var i=0;i<10;i++) 
{ 
var oli=document.createElement("li"); 
oui.appendChild(oli); 
oli.appendChild(document.createTextNode("Item"+i)); 
} 

上面的代码在循环中调用了oui.appendChild（oli），每次执行这条语句后，浏览器都会更新页面。其次下面的oui.appendChild()添加了文本节点，也要更新页面。所以一共要更新页面20次。 
为了页面的优化，我们要尽量减少DOM的操作，将列表项目在添加文本节点之后再添加，并合理地使用creatDocumentFragment(),代码如下：

var oui=document.getElementById("oItem"); 
var oFragment=document.createDocumentFragment(); 
for(var i=0;i<10;i++){ 
var oli=document.createElement("li"); 
oli.appendChild(document.createTextNode("Item"+i)); 
oFragment.appendChild(oli); 
} 
oui.appendChild(oFragment);