JS动态创建元素的两种方法

本文旨在分享如何使用JavaScript动态创建元素的两种常见方法。对于那些希望在网页上灵活操作元素的朋友们，这两种方法都非常有价值。

一、字符串拼接形式

想象一下，我们需要随机生成一组数字，并将这些数据以条形图的形式渲染在一个名为“container”的div元素内。具体的实现步骤如下：

当页面加载完成时，我们设置一个空字符串`str`，然后通过一个循环生成随机数字。每一个数字都被包裹在一个div元素中，并添加到字符串`str`中。当循环结束后，我们将字符串赋值给“container”元素的`innerHTML`属性，从而在页面中显示这组动态生成的条形图。

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

一、理解需求与目标

二、步骤与实施策略

第一步：创建元素（Document.createElement()）

使用JavaScript的Document对象中的createElement()方法，可以创建一个新的元素节点。例如，我们可以创建一个新的span元素。

第二步：找到父级元素（通过Id、name、标签名、class、匹配指定的css选择器）

在DOM中，我们可以通过多种方式获取到元素的引用。最常用的方式是通过元素的Id、name属性，或者通过标签名、class以及CSS选择器来获取元素。在本例中，我们需要找到父级元素，即包含子元素的容器。

三、实战演练：代码实现

HTML部分：

```html

```

JavaScript部分：

```javascript

window.onload = function () {

var inputValue = document.getElementById('txt_input').value; //获取输入框的值作为新元素的文本内容

var span = document.createElement('span'); //创建新的span元素节点

spannerHTML = inputValue; //设置新元素的文本内容

var container = document.getElementById('container'); //获取父级元素引用

}

}