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 元素的常见场景，可以根据实际需求选择合适的方式。