本文主要介绍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.在末尾添加一个元素
}
}
/脚本
这就是本文的全部内容，希望对大家的学习有所帮助。
