JavaScript 插入HTML字符串

■知识点

    使用innerHTML属性可以根据传入的HTML字符串创建新的DOM片段，然后用这个DOM片段完全替换调用元素原有的所有子节点。设置innerHTML属性值之后，可以像访问文档中的其他节点一样访问新创建的节点。

■实例设计

    下面的示例将创建一个1000行的表格。先构造一个HTML字符串，然后更新DOM的innerHTML属性。

<script>

function tablelnnerHTML() {

    var i, h = ['<table border="l" width="100%">']; 

    h.push('<thead>');

    h .push('<tr><th>id<\/th><th>yes?<\/th><th>name<\/th><th>url<\/th><th>action<\/th><\/tr>');

    h.push('<\/thead>'); 

    h.push('<tbody>'); 

    for( i = 1; i <= 1000; i++) { 

        h.push('<tr><td>'); 

        h.push(i);

        h.push('<\/tdxtd>');

        h.push('And the answer is... ' + (i % 2 ? 'yes' : 'no')); 

        h.push('<\/tdxtd>'); 

        h.push('my name is #' + i); 

        h.push ('<\/tdxtd>');

        h.push ('<a href=”http://example.org/' + i + '.html">http://example.org/' + i + '.html<\/a>');

        h.push ('<\/tdxtd>'); 

        h.push('<ul>');

        h.push(' <li><a href="edit.php?id=' + i + '">edit<\/a><\/li>'); 

        h.push('<li><a href="delete.php?id="' +i+ '-id001">delete<\/a><\/li>'); 

        h.push('<\/ul>'); 

        h.push('<\/td>'); 

        h.push('<\/tr>');

}

h.push('<\/tbody>'); 

h.push('<\/table>');

document.getElementById('here').innerHTML = h.join('');

};

</script>

<div id="here"></div>

<script>

tablelnnerHTML();

</script>

    如果通过 DOM 的 document.createElement()和 document.createTextNode()方法创建同样的表格，代码会非常冗长。在一个性能苛刻的操作中更新一大块HTML页面，innerHTML在大多数浏览器中执行得更快。