JavaScript创建div元素

在开发动态网页时，经常需要通过JavaScript动态创建HTML元素，比如``或其他标签。实现方式非常简洁：调用`document.createElement()`方法，并传入目标标签名（如`div`）即可生成对应元素节点。例如，当用户点击按钮时，可触发脚本创建一个新的``，随后为其设置文本内容、添加CSS类、插入内联样式或追加子元素。该元素默认处于文档之外，需进一步使用`appendChild()`或`insertBefore()`等方法将其挂载到页面指定位置，才能实际渲染显示。整个过程无需刷新页面，响应迅速，是构建交互式界面的基础技术之一。

1、 新建一个HTML文件，所示。

2、 在HTML页面中添加一个可点击的按钮元素。

3、 代码：

4、 为按钮添加点击事件，使其每次被点击时动态创建一个新div元素。通过document.createElement(div)生成该元素，再利用innerHTML为其设置具体内容，最后将该div插入到页面body中，使其在网页上显示出来。整个过程无需预先定义HTML结构，完全由JavaScript实时生成并渲染。

5、 代码：

6、 该代码段定义了一个名为`creatDiv`的JavaScript函数，用于动态创建并插入一个HTML元素。函数首先通过`document.createElement(div)`生成一个新的`div`节点，接着使用`innerHTML`属性为其设置文本内容你好！，最后调用`document.body.appendChild(div)`将该`div`添加到网页主体的末尾。执行此函数后，页面底部会即时显示一个包含纯文本你好！的块级元素。整个过程不依赖外部资源，完全在客户端浏览器中运行，适用于需要在页面加载后或用户交互时动态添加内容的场景，具有轻量、即时、无需刷新页面的特点。

7、 为按钮添加点击事件，实现动态创建新div元素。

8、 代码：

9、 点击此按钮可创建一个新的div元素。

10、 保存HTML文件后，用浏览器打开并点击按钮，即可触发预设的创建div元素事件。效果所示。