JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

JS优化,用innerHTML代替createElement和appendChild,省时省力

innerHTML 属性:设置或返回表格行的开始和结束标签之间的 HTML。

innerHTML用法示例

  • HTML代码:
        <div id="demo1">
            <p>innerHTML Demo</p>
        </div>
  • Javascript代码:
       alert(document.getElementById("demo1").innerHTML);
       document.getElementById("demo1").innerHTML="<p>innerHTML改变了我!</p><p>新添加的一段文本...</p>"
  • 运行结果:
        首先弹出警告框,显示 innerHTML Demo ,此时页面显示的是innerHTML Demo。点击“确定”按钮,会看到页面的内容发生改变,原来的内容被替换掉,添加进新的内容。

使用innerHTML提高效率

说明:根据数据构建列表样式的时候,使用设置列表容器innerHTML的方式,比构建dom元素并append到页面中的方式,效率有数量级上的提高。

使用innerHTML前:
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++)
{
    var el = document.createElement('p');
   el.innerHTML = i;
   frag.appendChild(el);
}
document.body.appendChild(frag);

使用innerHTML后:
var html = [];
for (var i = 0; i < 1000; i++)
{
   html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');

注意,使用innerHTML程序效率会有数量级上的提高,尤其是要向DOM中添加大量节点时,效率提高更加明显。