用innerHTML创建元素

最新推荐文章于 2022-12-20 15:19:24 发布

双木荼

最新推荐文章于 2022-12-20 15:19:24 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/crazy_littlepig/article/details/51377027

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在JavaScript中高效创建元素的方法，通过对比`createElement`和`innerHTML`，揭示了在构建列表样式时使用后者能显著提高效率。提供了具体的代码示例，展示了如何利用此技巧实现快速的元素生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人有点懒，今天发现一个有很有用的偷懒的方法，那就是关于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>";
           };
       }