JS中动态创建元素的三种方法总结(推荐)


Posted in Javascript onOctober 20, 2016

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中动态创建元素的三种方法总结(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
localStorage实现便签小程序
Nov 28 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
yarn与npm的命令行小结
Oct 20 #Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 #Javascript
Javascript的动态增加类的实现方法
Oct 20 #Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 #Javascript
javascript淘宝主图放大镜功能
Oct 20 #Javascript
利用Angular.js限制textarea输入的字数
Oct 20 #Javascript
一个极为简单的requirejs实现方法
Oct 20 #Javascript
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
django框架模板语言使用方法详解
2019/07/18 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
python实现超级马里奥
2020/03/18 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
python 实现超级玛丽游戏
2020/11/25 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
亮剑精神演讲稿
2014/05/23 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
企业法人代表证明书
2014/09/27 职场文书
科技活动周标语
2014/10/08 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书