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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
详解vue2.0模拟后台json数据
May 16 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
深入了解JS之作用域和闭包
Jun 16 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
php中关于换行的实例写法
2019/09/26 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python中如何进行连乘计算
2020/05/28 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
2014年度党员自我评议
2014/09/13 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
故宫导游词
2015/01/31 职场文书
科技馆观后感
2015/06/08 职场文书
课题研究阶段性总结
2015/08/13 职场文书