为什么要使用字符串拼接创建html标签

如果创建100p标签你会采用什么方式?createElement频繁的对dom进行操作?还是先拼接好了字符串然后使用innerHTML一次添加到页面。

/*createElement创建100个p标签*/
for(var i = 0;i < 100;i++) {
    var p = document.createElement("p");
    p.innerHTML = "这是一个p标签";
    document.body.appendChild(p);
}

先来分析一下:首先进入循环会先创建一个p(dom操作)然后对p标签设置内容然后在将p标签添加到页面(dom操作) 。可以看出来创建一个p标签需要对dom操作两次,循环100次就要操作dom200次。循环100次可能不算特别多,那如果是1w次尼、2w、10w……

/*字符串拼接创建p标签*/
var str = "";
for(var i = 0;i < 100;i++) {
    str += "<p>这是一个p标签</p>";
}
document.body.innerHTML = str;

来分析一下字符串拼接的方式:首页声明一个变量,这个不怎么浪费资源吧,然后进入循环对str进行赋值,循环完了添加到页面(dom操作)。整个循环只有一次dom操作,并且js对变量赋值的时间是肯定小于dom操作的。
所以推荐使用字符串拼接的方式来创建标签。

转载请注明文章出处

查看微博长图