JS-元素创建的三种方式(+动态创建列表的例子)

Undefined,

于 2020-04-22 13:04:33 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/qq_42301358/article/details/105676359

版权

本文介绍了JavaScript中创建元素的三种方法，包括document.write、innerHTML和createElement。特别强调了document.write在页面加载后使用可能导致的问题，并详细解释了如何使用createElement动态创建元素并将其添加到父元素。还提供了一个动态创建列表的实例，展示了在按钮点击后动态增加列表项的功能。

摘要由CSDN通过智能技术生成

元素创建的三种方式:

document.write(“标签的代码及内容”);
对象.innerHTML=“标签的代码及内容”;
document.createElement(“标签的名字”);

<body>
    <input type="button" value="创建一个p标签" id="btn"> 
    <script>
        document.getElementById('btn').onclick = function() {
    
        	//创建元素
            document.write("<p>这是一个p标签</p>");
        }
    </script>
</body>

点击按钮之前：
在这里插入图片描述
点击按钮之后：

可见document.write()创建元素有缺陷：如果是在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的所有的内容都会没有。

用createElement创建元素

这种方式创建元素需要两步：
先用createElemen创建元素，其返回的是个对象；
然后用appendChild把创建的元素追加到父级元素中。

<body>
    <input type="button" value="点我" id=

最低0.47元/天解锁文章