本人有点懒,今天发现一个有很有用的偷懒的方法,那就是关于Js创建元素的方法,废话不多说,直接上代码:
<html>
<body>
<div id="texts">
</div>
<button id="add">创建新按钮</button>
</body>
点击按钮能够在texts上添加一条<p>博主好屌</p>
演员登场:
男一号:createElement
function function1(){
var div = document.getElementById("texts");
var add = document.getElementById("add");
//添加按钮事件
add.onclick = function(){
//男一号登场
var newp= document.createElement("p");
newp.innerHTML = "博主好屌";
div.appendChild(newp);
};
}
男二号:innerHTML
function function1(){
var div = document.getElementById("texts");
var add = document.getElementById("add");
//添加按钮事件
add.onclick = function(){
//男二号登场
div.innerHTML += "<p>博主好屌</p>";
};
}
从上面就可以看出来用innerHTML显然比用createElement提高了效率。
此外通过网上了解到根据数据构建列表样式的时候,使用设置列表容器innerHTML的方式,比构建dom元素并append到页面中的方式,效率有数量级上的提高。这也算是js优化吧。