使用DOM的核心方法生成段落和表格 2009/09/18 脚本杂文hidehai发表留言 使用DOM的核心方法生成段落和表格，createDocumentFragment能够解决大数据量加载缓慢的问题，避免独立加载页面刷新的消耗。对于表格DOM提供了比核心方法更加方便的方法来设计创建表格 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> JS的核心DOM实例</title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <script type="text/javascript"> <!-- // 创建段落 var arrText = ["first","second","third","fourth","fifith","sixth","seventh","eighth","ninth","tenth"]; var oFragment = document.createDocumentFragment(); for(var i=0 ; i < arrText.length ; i++){ var oP = document.createElement("p"); var oText = document.createTextNode(arrText[i]); oP.appendChild(oText); oFragment.appendChild(oP); } document.body.appendChild(oFragment); //使用核心DOM方法建立表格 var oTable = document.createElement("table"); oTable.setAttribute("border","1"); oTable.setAttribute("width","100%"); var oTBody = document.createElement("tbody"); oTable.appendChild(oTBody); oTBody.insertRow(0); oTBody.rows[0].insertCell(0); oTBody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1")); //行的第一列 oTBody.rows[0].insertCell(1); oTBody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1")); //行的第二列 oTBody.insertRow(1); oTBody.rows[1].insertCell(0); oTBody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2")); oTBody.rows[1].insertCell(1); oTBody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); oFragment.appendChild(oTable); document.body.appendChild(oFragment); //--> </script> </body> </html> Related posts: js验证字符串为86开头的指定长度 javascript输出指定范围素数 window.opener的调用 使用JavaScript打开URL的多个方法