JS动态创建元素的两种方法


Posted in Javascript onApril 20, 2016

本文为大家分享了js创建元素的两种方法供大家参考,具体内容如下

1)将需要创建的元素,以字符串的形式拼接;找到父级元素,直接对父级元素的innnerHTML进行赋值。

2)使用Document、Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素)

一、字符串拼接形式

    为了更好的理解,设定一个应用场景。

    随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图

      JS动态创建元素的两种方法

<div id="container">
 </div>
 <script>
  window.onload = function () {
   var str='';
   for(var i=0; i<30 ;i++){
    var r = parseInt(Math.random()*100); //随机生成一个数字
    str += '<div>'+r+'</div>'; //拼接str
   }
   document.getElementById('container').innerHTML=str;
  }
 </script>

 二、使用Document、Element对象自带的一些函数

       也设定一个应用场景,如下图

       获取input中的信息,根据右边的按钮,分别插入到下方红色矩形的左边或者右边。

      JS动态创建元素的两种方法

解决思路分三步:

1、创建元素:Document.createElement()
2、找到父级元素 :可以通过Id、name、标签名、class、匹配指定的css选择器
3、在指定位置插入元素:element.appendChild()、element.insertBefore()       

实现代码:       

<div id="div-input">
 <input type="text" id="txt_input" value="4"/>
 <input type="button" id="leftInsert" value="左侧入" />
 <input type="button" id="rightInsert" value="右侧入" />
</div>
<div id="container">
 <span>1</span>
 <span>2</span>
 <span>3</span>
</div>
 <script>
  window.onload = function () {
   var inputValue= document.getElementById('txt_input').value;
   document.getElementById('leftInsert').onclick=function(){
    //左侧入
    var span = document.createElement('span'); //1、创建元素
    span.innerHTML=inputValue;
    var container = document.getElementById('container'); //2、找到父级元素
    container.insertBefore(span,container.childNodes[0]);//插入到最左边
   }
   document.getElementById('rightInsert').onclick=function(){
    //右侧入
    var span = document.createElement('span'); //1、创建元素
    span.innerHTML=inputValue;
    var container = document.getElementById('container'); //2、找到父级元素
    container.appendChild(span); //3、在末尾中添加元素
   }
  }
 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
bootstrapvalidator之API学习教程
Jun 29 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 #Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 #Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 #Javascript
JavaScript实现简单Tip提示框效果
Apr 20 #Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 #Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 #Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 #Javascript
You might like
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
幼师自荐信范文
2013/10/06 职场文书
后勤岗位职责
2013/11/26 职场文书
公司中秋节活动方案
2014/02/12 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
退税申请报告怎么写
2015/05/18 职场文书
实验室安全管理制度
2015/08/05 职场文书