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 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
PHP分页类集锦
2014/11/18 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
javascript标签在页面中的位置探讨
2013/04/11 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
javascript中的隐式调用
2018/02/10 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
Python实现批量修改文件名实例
2015/07/08 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
教师产假请假条范文
2014/04/10 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
慰问信范文
2015/02/14 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
运动会表扬稿范文
2015/05/05 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
如何用Navicat操作MySQL
2021/05/12 MySQL