JavaScript 插入HTML字符串

■知識點

    使用innerHTML屬性可以根據(jù)傳入的HTML字符串創(chuàng)建新的DOM片段，然后用這個DOM片段完全替換調用元素原有的所有子節(jié)點。設置innerHTML屬性值之后，可以像訪問文檔中的其他節(jié)點一樣訪問新創(chuàng)建的節(jié)點。

■實例設計

    下面的示例將創(chuàng)建一個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()方法創(chuàng)建同樣的表格，代碼會非常冗長。在一個性能苛刻的操作中更新一大塊HTML頁面，innerHTML在大多數(shù)瀏覽器中執(zhí)行得更快。