JS 事件 - 实现动态添加 div 类

在前端开发中，我们经常需要在页面中动态添加元素并为其添加样式类。以下是一段可以实现这一功能的 JavaScript 代码：

// 获取对应的 DOM 节点
const container = document.getElementById('container');

// 创建新的 div 元素
const newDiv = document.createElement('div');

// 为新元素添加类名
newDiv.classList.add('new-class');

// 将新元素添加到指定节点中
container.appendChild(newDiv);

上述代码中，我们利用了 DOM 操作中的 createElement 和 appendChild 方法来创建和添加新元素，利用 classList 提供的 add 方法来为元素添加类名。这样，即可快速实现动态添加元素并为其添加样式类的效果。

另外，我们也可以使用事件监听器来在元素被点击时动态添加类名：

// 获取对应的 DOM 节点
const target = document.getElementById('target-element');

// 添加点击事件监听器
target.addEventListener('click', () => {
  // 为目标元素添加类名
  target.classList.add('my-class');
});

上述代码中，我们利用了 addEventListener 方法来为目标节点添加点击事件监听器。当元素被点击时，回调函数中的代码将为目标元素添加指定类名。这样，我们即可实现在运行时动态添加类名的效果。

总的来说，JavaScript 事件可以帮助我们实现各种交互效果。通过对 DOM 操作和事件监听器的结合使用，我们可以快速实现各种动态添加元素的效果。