js中实现div

创建 HTML 元素

在 HTML 文件中直接使用 <div> 标签创建元素：

<div id="exampleDiv">这是一个 div 元素</div>

通过 JavaScript 动态创建

使用 document.createElement 方法动态生成 div 元素，并添加到 DOM 中：

const div = document.createElement('div');
div.textContent = '动态创建的 div';
document.body.appendChild(div);

设置样式

通过 style 属性为 div 添加 CSS 样式：

div.style.width = '200px';
div.style.height = '100px';
div.style.backgroundColor = 'lightblue';
div.style.margin = '10px';

添加事件监听

为 div 绑定交互事件，例如点击事件：

div.addEventListener('click', () => {
  alert('Div 被点击了');
});

修改内容

动态更新 div 的文本或 HTML 内容：

div.textContent = '更新后的文本内容';
// 或使用 innerHTML（注意 XSS 风险）
div.innerHTML = '<strong>加粗文本</strong>';

移除元素

从 DOM 中删除 div 元素：

div.remove();
// 或通过父元素移除
document.body.removeChild(div);