js实现div
使用 JavaScript 创建 div 元素
在 JavaScript 中创建 div 元素可以通过 DOM 操作实现。以下是几种常见的方法：
方法 1：使用 document.createElement
通过 document.createElement 方法创建 div 元素，并设置其属性和内容：
const div = document.createElement('div');
div.id = 'myDiv';
div.className = 'container';
div.textContent = '这是一个动态创建的 div';
document.body.appendChild(div);方法 2：直接修改 innerHTML
通过修改父元素的 innerHTML 插入 div：
document.body.innerHTML += '<div id="myDiv" class="container">这是一个动态创建的 div</div>';方法 3：使用 insertAdjacentHTML
通过 insertAdjacentHTML 在指定位置插入 div：
document.body.insertAdjacentHTML('beforeend', '<div id="myDiv" class="container">这是一个动态创建的 div</div>');设置 div 的样式
创建 div 后，可以通过 JavaScript 动态设置样式：
const div = document.createElement('div');
div.style.width = '200px';
div.style.height = '100px';
div.style.backgroundColor = 'lightblue';
div.style.border = '1px solid black';
document.body.appendChild(div);添加事件监听
可以为 div 添加事件监听器，实现交互功能：
const div = document.createElement('div');
div.textContent = '点击我';
div.addEventListener('click', () => {
alert('Div 被点击了！');
});
document.body.appendChild(div);动态添加多个 div
通过循环动态添加多个 div：
for (let i = 0; i < 5; i++) {
const div = document.createElement('div');
div.textContent = `Div ${i + 1}`;
div.style.margin = '10px';
div.style.padding = '10px';
div.style.backgroundColor = 'lightgreen';
document.body.appendChild(div);
}使用模板字符串创建复杂结构
通过模板字符串创建包含嵌套结构的 div：
const html = `
<div class="card">
<h3>标题</h3>
<p>这是一个卡片内容</p>
</div>
`;
document.body.insertAdjacentHTML('beforeend', html);以上方法涵盖了 JavaScript 创建和操作 div 元素的常见场景，可以根据实际需求选择合适的方式。
