浅析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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
Smarty变量用法详解
2016/05/11 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
python中requests使用代理proxies方法介绍
2017/10/25 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Python  Django 母版和继承解析
2019/08/09 Python
wxPython色环电阻计算器
2019/11/18 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python自动化发送邮件实例讲解
2021/01/04 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
初三新学期计划书
2014/05/03 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
服务明星事迹材料
2014/12/29 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
从原生JavaScript到React深入理解
2022/07/23 Javascript