最近在做AJAX,想用javascript实现DataList功能,遇到一个棘手的问题,由于要生成的HTML很长,所以我写成如下的形式:

list.innerHTML="

";

list.innerHTML+="

"

......

但是这样生成的innerHTML始终不对,研究了半天,原来是innerHTML搞得鬼.innerHTML自带了语法检查功能,他会自动把不完整的HTML代码补充完整.运行如下的一个测试代码就可以发现了.

document.getElementById("AlbumList").innerHTML="

";
alert(document.getElementById("AlbumList").innerHTML);

他会自动把我的代码里面添加了

等标记.神奇!!!

那么不让他自动填写的一个办法就是用一个中间变量:

var html="

";

html+="

";

......

list.innerHTML=html;

就这样就可以解决问题了.

 
另外:
  • 需要在表格中動態地修改各節點時,innerHTML不是個好方法
    HTMLDom會是你更好的選擇:





    BaseRow





    根据我以往的經驗,innerHTML只适合修改頁面上靜態内容。比如div和span里的动态信息。以及在某个可显示容器内一次性显示较复杂的内容对象,比如一张表格。而对现有的对象做修改,还是应该使用Dom来解决。

 

  • 還有,關于innerHTML效率的問題
    1,使用innerHTML+=是最慢的(拋開自動添加標簽的行為不計)
    2,使用string做中間量。(也是用+=)。最后直接用于innerHTML的賦值。在不需要進行+=操作時,這種方法是最快的。
    3,使用Array做中間量。使用push和join組合成String直接賦值于innerHTML。在需要較多的+=的操作時,這個方法會是最快的!
    還有:在需要創建復雜界面時,以上三個方法都會比上面所說的DOM操作快很多!但是卻極為缺乏靈活性。
阅读(943) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~