JS中动态创建元素的三种方法总结(推荐)
更新时间：2016年10月20日 09:27:07 投稿：jingxian
下面小编就为大家带来一篇JS中动态创建元素的三种方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1、动态创建元素一 document.write()
例如向页面中输出一个 li 标签
<pre class="html" name="code"><span style="font-size:12px;"><script>
document.write("<li>123</li>");
</script></span>
body标签中就会插入但是这种方法几乎不用，因为这回影响页面的布局，甚至会将页面原来的内容冲刷掉，从而只显示输出内容
2、动态创建元素二 innerHTML
<span style="font-size:12px;"><body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
box.innerHTML = "<p>这是p标签</p>";
</script>
</body></span>
div标签中就会插入一个p标签，并在在页面上输出“这是标签”，当需要添加的标签比较多的时候使用这种方式。
3、动态创建元素三 document.createElement()
<span style="font-size:12px;"><body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
var li = document.createElement("li"); //创建一个li标签
li.innerHTML = "123"; //给li标签赋值
box.appendChild(li); //将创建好的li标签追加到box标签中
</script>
</body></span>
div标签下面就会创建了一个li标签，当需要动态创建的标签比较少的时候就使用这种方式
以上就是小编为大家带来的JS中动态创建元素的三种方法总结(推荐)全部内容了，希望大家多多支持脚本之家~
相关文章
此前发表的那一版确实能不用循环，但是总用正则表达式的替换，不一定比用循环提高性能，而且把程序搞得有些太复杂了。从《JavaScript权威指南》上学到的范例如下2009-01-01
这篇文章主要介绍了js检测离开或刷新页面时表单数据是否更改的方法,涉及javascript表单操作及事件响应的相关技巧,需要的朋友可以参考下2016-08-08
联合类型在 TypeScript 中相当流行，你可能已经用过很多次了。交叉类型稍微不那么常见，它们似乎引起更多的困惑，这篇文章主要介绍了一文读懂TS 中联合类型和交叉类型的含义,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了完美实现js焦点轮播效果的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了JavaScript检查元素存在性的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了微信小程序实现多选删除列表数据功能,涉及微信小程序列表数据读取、显示、删除等相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了ES6函数实现排它两种写法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了webstorm中配置Eslint的两种方式及差异比较详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
对于数据结构“树”，想必大家都熟悉，本文，我们就再来回顾一下数据结构中的二叉树与树，并用JavaScript实现它们。下面就跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了在Postman的脚本中如何使用pm对象获取接口的请求参数,本文通过实例代码图文相结合给大家介绍的非常详细,需要的朋友可以参考下2023-09-09
最新评论