您的位置：首页 > Web前端 > HTML

用innerHTML创建元素

2016-05-11 18:23 417 查看
本人有点懒，今天发现一个有很有用的偷懒的方法，那就是关于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优化吧。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航