浅析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 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
jquery实现手风琴效果
Nov 20 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 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修改session_id示例代码
2014/01/08 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
prototype 的说明 js类
2006/09/07 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
JS实现分页导航效果
2020/02/19 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
婚假请假条怎么写
2014/04/10 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
三峡导游词
2015/01/31 职场文书
观后感开头
2015/06/19 职场文书
关于运动会的广播稿
2015/08/19 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏