js实现div
使用JavaScript创建和操作div元素
在JavaScript中动态创建和操作div元素是前端开发的常见需求。以下是几种核心方法：
创建div元素
通过document.createElement()方法生成一个新的div节点：
const newDiv = document.createElement('div');设置div属性
使用setAttribute()或直接属性赋值：
newDiv.id = 'myDiv';
newDiv.className = 'container';
// 或
newDiv.setAttribute('data-custom', 'value');添加内容
通过innerHTML或textContent添加内容：
newDiv.innerHTML = '<p>动态内容</p>';
// 或
newDiv.textContent = '纯文本内容';插入到DOM
使用appendChild()或insertBefore()将元素插入文档：
document.body.appendChild(newDiv);
// 或
const parent = document.getElementById('parent');
parent.insertBefore(newDiv, parent.firstChild);样式操作
直接修改style属性或通过classList管理类：
newDiv.style.backgroundColor = '#f0f0f0';
newDiv.classList.add('active');事件绑定
通过addEventListener添加交互功能：
newDiv.addEventListener('click', function() {
alert('Div被点击了!');
});完整示例
以下代码展示从创建到插入的完整流程：
// 创建元素
const dynamicDiv = document.createElement('div');
dynamicDiv.id = 'dynamicBox';
// 设置样式
dynamicDiv.style.width = '200px';
dynamicDiv.style.height = '100px';
dynamicDiv.style.border = '1px solid #333';
// 添加内容
dynamicDiv.textContent = '动态创建的DIV';
// 添加到页面
document.body.appendChild(dynamicDiv);
// 添加事件
dynamicDiv.addEventListener('mouseover', () => {
dynamicDiv.style.backgroundColor = '#eee';
});性能优化建议
批量DOM操作时建议使用DocumentFragment：
const fragment = document.createDocumentFragment();
for(let i=0; i<100; i++){
const item = document.createElement('div');
item.textContent = `Item ${i}`;
fragment.appendChild(item);
}
document.body.appendChild(fragment);现代API替代方案
考虑使用insertAdjacentHTML()快速插入：
document.body.insertAdjacentHTML(
'beforeend',
'<div class="alert">提示信息</div>'
);
