浅析JS动态创建元素【两种方法】


Posted in Javascript onApril 20, 2016

前言

创建元素有两种方法

      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>

以上这篇浅析JS动态创建元素【两种方法】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
js 通用订单代码
Dec 23 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
纯JS代码实现一键分享功能
Apr 20 #Javascript
JavaScript动态生成二维码图片
Apr 20 #Javascript
JS动态创建元素的两种方法
Apr 20 #Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 #Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 #Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 #Javascript
JavaScript实现简单Tip提示框效果
Apr 20 #Javascript
You might like
php分页思路以及在ZF中的使用
2012/05/30 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
python通过post提交数据的方法
2015/05/06 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
WxPython建立批量录入框窗口
2019/02/27 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
班组长岗位职责范本
2014/01/05 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
工程资料员岗位职责
2014/03/10 职场文书
电气工程师岗位职责
2015/02/12 职场文书
初三数学教学反思
2016/02/17 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript