使用JavaScript动态创建div元素|极客笔记

使用JavaScript动态创建div元素

在网页开发中，经常会遇到需要动态创建HTML元素的情况。比如需要根据用户输入或者后台数据动态生成一些内容，这时就可以利用JavaScript来创建新的元素。

在本文中，我们将介绍如何使用JavaScript来创建一个div元素，并将其添加到网页中。

步骤一：创建一个空的HTML文件

首先，我们需要创建一个空的HTML文件，以便在其中编写我们的JavaScript代码。以下是一个简单的HTML模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create div with JavaScript</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

步骤二：编写JavaScript代码

接下来，我们需要在一个单独的script.js文件中编写JavaScript代码来创建div元素。以下是一个示例：

// 创建一个新的div元素
let newDiv = document.createElement("div");

// 设置div元素的文本内容
newDiv.innerHTML = "这是一个动态创建的div元素";

// 设置div元素的样式
newDiv.style.width = "200px";
newDiv.style.height = "200px";
newDiv.style.backgroundColor = "lightblue";

// 将div元素添加到body中
document.body.appendChild(newDiv);

在上面的代码中，我们首先使用document.createElement()方法创建了一个新的div元素，并且设置了其文本内容和样式。然后，我们使用document.body.appendChild()方法将这个新元素添加到了页面的<body>标签中。