浅析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 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
JS实现购物车特效
Feb 02 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
PHP代码加密的方法总结
2020/03/13 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python读文件的步骤
2019/10/08 Python
如何基于Python创建目录文件夹
2019/12/31 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
python爬取微博评论的实例讲解
2021/01/15 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
先进个人事迹材料
2014/01/25 职场文书
民生工作实施方案
2014/05/31 职场文书
物业管理专业求职信
2014/06/11 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP