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 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
js实现扫雷源代码
Nov 27 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
如何判断php数组的维度
2013/06/10 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
开业庆典邀请函
2014/01/08 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
乡下人家教学反思
2014/02/01 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
护理专科自荐书范文
2014/02/18 职场文书
大三学习计划书范文
2014/05/02 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
起诉状范本
2015/05/20 职场文书
单位考核鉴定意见
2015/06/05 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
python 爬取天气网卫星图片
2021/06/07 Python