本文主要介绍JS动态创建元素的两种方法，字符串拼接，或者利用Document和Element对象的一些功能。

有需要的朋友可以参考一下。

本文分享两种js创建元素的方法，供大家参考。具体如下。

1)拼接要以串的形式创建的元素；找到父元素，直接赋父元素的innnerHTML。

2)使用文档和元素对象附带的一些函数来动态创建元素(创建元素=查找父元素=在指定位置插入元素)

一、字符串拼接形式

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

生成一组随机的数字，将这组数据呈现为条形图，并放入div[id='container']，如下图所示

div id='容器'

/div

脚本

window.onload=function () {

var str=“”；

for(var I=0；i30i ){

var r=parse int(math . random()* 100)；//随机生成一个数字

str=' div ' r '/div '；//拼接字符串

}

document . getelementbyid(' container ')。innerHTML=str

}

/脚本

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

还要设置一个应用场景，如下图所示

在input中获取信息，并根据右边的按钮将其插入下面红色矩形的左边或右边。

该解决方案分为三个步骤：

1.创建元素：Document.createElement()

2.查找父元素：您可以通过Id、名称、标记名、类来匹配指定的css选择器。

3.在指定位置插入元素：element.appendChild()，element.insertBefore()

实施代码：

div id='div-input '

输入类型=' text ' id=' txt _ input ' value=' 4 '/

type=' button ' id=' left insert ' value=' left input '/

type=' button ' id=' right insert ' value=' right input '/

/div

div id='容器'

span1/span

span2/span

span3/span

/div

脚本

window.onload=function () {

var input value=document . getelementbyid(' txt _ input ')。价值；

document . getelementbyid(' left insert ')。onclick=function(){

//左侧输入

var span=document . createelement(' span ')；//1.创建一个元素

span.innerHTML=inputValue

var container=document . getelementbyid(' container ')；//2.找到父元素。

container.insertBefore(span，container . child nodes[0])；//插入到最左边

}

document . getelementbyid(' right insert ')。onclick=function(){

//右输入

var span=document . createelement(' span ')；//1.创建一个元素

span.innerHTML=inputValue

var container=document . getelementbyid(' container ')；//2.找到父元素。

container . appendchild(span)；//3.在末尾添加一个元素

}

}

/脚本

这就是本文的全部内容，希望对大家的学习有所帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。