在前端开发中，我们经常需要通过 JavaScript 动态地创建、更改和移动 HTML 元素。其中最常见的元素之一是 <div> 元素，这篇文章将介绍如何使用 JavaScript 来实现这些目标。我们将从以下几个方面进行探讨：
- 创建新的 div 元素
- 更改 div 的属性和样式
- 移动 div 到不同的位置
- 使用事件监听器来响应用户操作
1. 创建新的 div 元素
要在 JavaScript 中创建一个新的 <div> 元素，可以使用 document.createElement() 方法。例如，以下代码将创建一个新的 <div> 元素，并将其添加到页面的 <body> 元素中：
const newDiv = document.createElement('div');
document.body.appendChild(newDiv);可以看到，在此代码片段中，我们首先使用 document.createElement() 方法创建了一个名为 newDiv 的新 <div> 元素。然后，我们使用 appendChild() 方法将其添加到文档中。
除了使用上述方法外，还可以使用以下方法将新的元素插入到 DOM 中：
insertBefore(): 将新元素插入到指定元素之前。insertAfter(): 将新元素插入到指定元素之后。replaceChild(): 替换现有元素为新元素。
2. 更改 div 的属性和样式
要更改 <div> 元素的属性和样式，可以使用 setAttribute() 和 style 属性。例如，以下代码将更改 newDiv 元素的背景颜色为红色，并将其宽度设置为 100 像素：
newDiv.setAttribute('id', 'myDiv');
newDiv.style.backgroundColor = 'red';
newDiv.style.width = '100px';可以看到，在此代码片段中，我们首先使用 setAttribute() 方法将 id 属性设置为 myDiv。然后，我们使用 style 属性将 background-color 和 width 样式设置为相应的值。
除了上述方法外，还可以使用以下方法更改元素的属性和样式：
setAttribute(): 设置指定属性的值。getAttribute(): 获取指定属性的值。removeAttribute(): 删除指定属性的值。classList.add(): 添加一个或多个类名到元素上。classList.remove(): 从元素上移除一个或多个类名。classList.toggle(): 切换元素上的一个或多个类名。
3. 移动 div 到不同的位置
要移动 <div> 元素到页面上的不同位置，可以使用以下方法：
appendChild(): 将元素添加到另一个元素的末尾。insertBefore(): 将元素插入到另一个元素之前。replaceChild(): 替换现有元素为新元素。
例如，以下代码将 newDiv 元素从 <body> 元素中移动到 <header> 元素中：
const headerElement = document.getElementsByTagName('header')[0];
headerElement.insertBefore(newDiv, headerElement.firstChild);可以看到，在此代码片段中，我们首先使用 getElementsByTagName() 方法获取页面上的 <header> 元素。然后，我们使用 insertBefore() 方法将 newDiv 元素插入到该元素的第一个子元素之前。
4. 使用事件监听器来响应用户操作
要在 JavaScript 中响应用户操作，可以使用事件监听器。以下是一些常见的事件和相应的监听器方法：
click: 当元素被点击时触发。mouseenter: 鼠标进入元素时触发。mouseleave: 鼠标离开元素时触发。keydown: 按
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12958