JS动态创建元素分析【两种方法】

前言：

有两种方法可以创建元素。

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

2)使用Document和Element对象的一些功能动态创建元素(创建元素=查找父元素=在指定位置插入元素)。

一、字符串拼接形式。

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

随机生成一组数字，将这组数据渲染成条形图，放入div[id='container']中，如下图所示。

div id=' container '/div script window . onload=function(){ var str=' '；for(var I=0；i30I){ var r=ParSeint(Math . random()* 100)；//随机生成一个数字str=' div ' r '/div '；//splice str } document . getelementbyid(“容器”)。innerhtml=str} /script 2。使用文档和元素对象附带的一些函数。

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

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

解决方案分为三个步骤：

创建元素：在Document.createElement()中找到的父元素：通过将指定的css选择器与Id、名称、标记名和类进行匹配，可以在指定的位置插入元素：element.appendChild()、element.insertBefore()实现代码：

div id=' div-Input ' Input type=' text ' id=' txt _ Input ' value=' 4 '/Input type=' button ' id=' left insert ' value=' left in '/Input type=' button ' id=' right insert ' value=' right Input '/div div id=' container ' span 1/span span 2/span span 3/span/div script window . onload=function()。{ var inputValue=document . getelementbyid(' txt _ input ')。价值；document . getelementbyid(' left nsert ')。onclick=function(){//在左侧输入var span=document . create element(' span ')；//1.创建元素span.innerHTML=inputValuevar container=document . getelementbyid(' container ')；//2.找到父元素container.insertbefore (span，container . child nodes[0])；//插入最左侧} document.getelementbyid('右插入')。onclick=function(){//在右侧输入var span=document . create element(' span ')；//1.创建元素span.innerHTML=inputValuevar container=document . getelementbyid(' container ')；//2、找到父元素container . appendchild(span)；//3.在最后添加元素} }/脚本以上对JS动态创建元素的简要分析【两种方法】是边肖与大家分享的全部内容，希望能给大家一个参考和支持。