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表单常用验证集合
Jan 16 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
javascript demo 基本技巧
Dec 18 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
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扩展程序实现守护进程
2015/04/16 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JavaScript中window.open用法实例详解
2015/04/15 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
JS合并两个数组的3种方法详解
2019/10/24 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
python对字典进行排序实例
2014/09/25 Python
python 变量初始化空列表的例子
2019/11/28 Python
Django数据库操作之save与update的使用
2020/04/01 Python
毕业生就业自荐信
2013/12/04 职场文书
自我评价正确写法范文
2013/12/10 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
2014年教研工作总结
2014/12/06 职场文书
2014年标准化工作总结
2014/12/17 职场文书
教师师德工作总结2015
2015/07/22 职场文书
中学图书馆工作总结
2015/08/11 职场文书
医学会议开幕词
2016/03/03 职场文书