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 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
vue实现标签云效果的示例
Nov 09 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
PHP 危险函数全解析
2009/09/09 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
一篇不错的Python入门教程
2007/02/08 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python处理“
2019/06/10 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Python 在局部变量域中执行代码
2020/08/07 Python
python sleep和wait对比总结
2021/02/03 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
大学运动会入场词
2014/02/22 职场文书
护理专科学生自荐书
2014/07/05 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
小学课改工作总结
2015/08/13 职场文书
导游词书写之黄山
2019/08/06 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS