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在大多数浏览器中执行得更快。
点击加载更多评论>>