使用文档碎片样式

最新推荐文章于 2022-06-13 00:17:09 发布

wogeiniziyou

最新推荐文章于 2022-06-13 00:17:09 发布

阅读量279

点赞数

文章标签：文档 function

本文链接：https://blog.csdn.net/wogeiniziyou/article/details/7573437

版权

<!-使用文档碎片样式，这样页面就只刷新了一次->

<html>
<head>
<script type='text/javascript'>

function insertMessage(){
 var arrText = ["first","second","third","fourth","fifth","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);
}

</script>
</head>
<body οnlοad="insertMessage()">
     <p>Hello World!</p>
</body>
</html>

<!-而以下的样式则页面需要刷新十次，降低了速度->

<html>
<head>
<script type='text/javascript'>

function insertMessage(){
 var arrText = ["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];
for(var i=0;i<arrText.length;i++){
    var oP = document.createElement("p");
    var oText = document.createTextNode(arrText[i]);
    oP.appendChild(oText);
    document.body.appendChild(oP);
}
}

</script>
</head>
<body οnlοad="insertMessage()">
     <p>Hello World!</p>
</body>
</html>

wogeiniziyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用文档碎片样式

function insertMessage(){ var arrText = ["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];var oFragment = document.createDocumentFragment();for(var i=0;i<arrTex
复制链接

扫一扫