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表单验证使用插件formValidator
Nov 10 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue中如何使用ztree
Feb 06 Javascript
node.js博客项目开发手记
Mar 16 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
JS ES6异步解决方案
Apr 29 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
服务器web工具 php环境下
2010/12/29 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
微信支付开发订单查询实例
2016/07/12 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
pandas series序列转化为星期几的实例
2018/04/11 Python
Python 统计字数的思路详解
2018/05/08 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python常用编译器原理及特点解析
2020/03/23 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
python中np是做什么的
2020/07/21 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
python 绘制正态曲线的示例
2020/09/24 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
大专生自荐信
2013/10/04 职场文书
名人演讲稿范文
2013/12/28 职场文书
庆八一活动方案
2014/01/25 职场文书
高二政治教学反思
2014/02/01 职场文书
中式结婚主持词
2014/03/14 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
swagger如何返回map字段注释
2021/07/03 Java/Android
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript