浅析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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
JS原型链怎么理解
Jun 27 Javascript
js实现常用排序算法
Aug 09 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 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(视频)Http下载
2006/12/12 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python k-近邻算法实例分享
2014/06/11 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python使用selenium实现批量文件下载
2019/03/11 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
护理学毕业生求职信
2013/11/14 职场文书
前台文员我鉴定
2014/01/12 职场文书
公证委托书标准格式
2014/09/11 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
罚站检讨书
2015/01/29 职场文书
个人年终总结开头
2015/03/06 职场文书