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 相关文章推荐
javascript 学习笔记(onchange等)
Nov 14 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
numpy返回array中元素的index方法
2018/06/27 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python爬取招聘要求等信息实例
2020/11/20 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
网络宣传方案
2014/03/15 职场文书
倡议书范文格式
2014/05/12 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
MySql新手入门的基本操作汇总
2021/05/13 MySQL
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
python实现简易自习室座位预约系统
2021/06/30 Python
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript