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 必填项判断表单是否为空的方法
Sep 14 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
js显示文本框提示文字的方法
May 07 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php建立Ftp连接的方法
2015/03/07 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
python绘图方法实例入门
2015/05/19 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
区分python中的进程与线程
2020/08/13 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
值传递还是引用传递
2015/02/08 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
教师党员一句话承诺
2014/03/28 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL