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中动态创建元素的三种方法总结(推荐)全部内容了，希望大家多多支持脚本之家~
相关文章
本文主要介绍了js实现常见的工具条效果的实例。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了JavaScript实现扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要为大家详细介绍了原生js实现波浪导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
对于js的一些常见事件的总结2008-12-12
这篇文章主要介绍了浅谈javascript中replace()方法，replace函数方法是返回根据正则表达式进行文字替换后的字符串的复制，需要的朋友可以参考下2015-11-11
这篇文章主要介绍了node express使用HTML模板的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了JS实现生成会变大变小的圆环,涉及javascript数学运算及页面样式动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
通过Tabs方法基于easyUI+bootstrap制作工作站
本教程给大家介绍如何制作easyUI+bootstrap工作站，主要学习tabs方法，本文介绍非常详细，具有参考借鉴价值，需要的朋友参考下吧2016-03-03
下面小编就为大家带来一篇浅谈js中字符和数组一些基本算法题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
相信大家也都发现了，在网上关于JS的变量和作用域的文章有很多，但真正能讲清楚，能深入理解的文章很少。在阅读了很多人的文章以后，我决定综合起来，结合实际代码，希望能够以一个比较清楚完整的方式让大家真正理解。有需要的朋友们下面来一起看看吧。2016-10-10
最新评论