JS动态创建元素（两种方法）

前言

　　创建元素有两种方法

1）将需要创建的元素，以字符串的形式拼接；找到父级元素，直接对父级元素的innnerHTML进行赋值。

2）使用Document、Element对象自带的一些函数，来实现动态创建元素（创建元素 => 找到父级元素 => 在指定位置插入元素）

一、字符串拼接形式

为了更好的理解，设定一个应用场景。

随机生成一组数字，将这组数据渲染为条形图的形式，放在div[id="container"]中，如下图

  <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中的信息，根据右边的按钮，分别插入到下方红色矩形的左边或者右边。

解决思路分三步：

创建元素：Document.createElement()
找到父级元素：可以通过Id、name、标签名、class、匹配指定的css选择器
在指定位置插入元素：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').οnclick=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').οnclick=function(){//右侧入var span = document.createElement('span'); //1、创建元素span.innerHTML=inputValue;var container = document.getElementById('container'); //2、找到父级元素container.appendChild(span); //3、在末尾中添加元素
          }}</script>

转载于:https://www.cnblogs.com/lanleiming/p/5411761.html

JS动态创建元素（两种方法）相关推荐

java数组循环扩容_Java中实现数组动态扩容的两种方法
Java中实现数组动态扩容的两种方法 java中初始化一个数组需要定义数组的容量,而在我们使用数组时往往会遇到数组容量不够的情况,此时我们就需要通过动态扩容的方式来来根据需求扩大数组的容量. 我们可以 ...
matlab 图像转视频教程,Matlab制作视频并转换成gif动态图的两种方法
一.第一个方法比较简单,就是使用movie(f)直接取生成AVI视频文件. %% f(t)-->f(4*t+12) 并且验证%% function Signal_change() tic%记录程 ...
js动态创建元素和删除
动态创建元素的三种方式: 一.document.write(): 功能:向body的最后添加一段结构: 参数:字符串: 用法:document.write('这是内容<div>这是div& ...
JS 动态创建元素、删除元素、替换元素、修改元素
动态创建元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空 ...
MP4文件如何转换成GIF动态图？两种方法帮你搞定
要将 MP4 文件转换为 GIF 动态图,您可以使用一些免费的在线工具或者软件进行转换.以下是两种常用的方法: 方法一:使用软件 1.下载并安装一个视频转换软件,例如 FFmpeg 或者 GifCam ...
Selenium webdriver定位iframe里面元素两种方法
以东方财富网登录页面为例: 在查找元素过程中,直接通过id或者xpath等找不到元素,查看页面源代码发现元素是属于iframe里,例如: <div class="wrap_login& ...
怎样用matlab把视频转gif动画,Matlab制作视频并转换成gif动态图的两种方法
一.第一个方法比较简单,就是使用movie(f)直接取生成AVI视频文件. %% f(t)–>f(4t+12) 并且验证%% function Signal_change() tic%记录程序运 ...
Matlab制作视频并转换成gif动态图的两种方法
一.第一个方法比较简单,就是使用movie(f)直接取生成AVI视频文件. %% f(t)-->f(4*t+12) 并且验证%% function Signal_change() tic%记录程 ...

JS动态创建元素（两种方法）

前言

一、字符串拼接形式

二、使用Document、Element对象自带的一些函数

JS动态创建元素（两种方法）相关推荐

最新文章

热门文章