JS如何动态创建元素

这篇文章主要介绍了JS如何动态创建元素的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JS如何动态创建元素文章都会有所收获，下面我们一起来看看吧。

创新互联公司专注于沂水企业网站建设,成都响应式网站建设,成都商城网站开发。沂水网站建设公司,为沂水等地区提供建站服务。全流程按需网站策划，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务

一、字符串拼接形式

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

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

JS如何动态创建元素

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

也设定一个应用场景，如下图

获取input中的信息，根据右边的按钮，分别插入到下方红色矩形的左边或者右边。

JS如何动态创建元素

解决思路分三步：

1、创建元素：Document.createElement()
2、找到父级元素：可以通过Id、name、标签名、class、匹配指定的css选择器
3、在指定位置插入元素：element.appendChild()、element.insertBefore()

实现代码：