js实现div
使用 JavaScript 创建 div 元素
通过 document.createElement 方法可以动态创建一个 div 元素。以下是基本实现方式:
const div = document.createElement('div');
div.textContent = '这是一个动态创建的 div';
document.body.appendChild(div);
设置 div 属性
创建后可以为 div 设置各种属性和样式:
div.id = 'myDiv';
div.className = 'container';
div.style.backgroundColor = 'lightblue';
div.style.padding = '20px';
添加事件监听
可以为创建的 div 添加交互事件:

div.addEventListener('click', function() {
alert('Div 被点击了!');
});
插入到特定位置
使用 DOM 操作方法将 div 插入到页面指定位置:
const parent = document.getElementById('parentElement');
parent.insertBefore(div, parent.firstChild);
批量创建多个 div
使用循环批量创建并添加到页面:

for (let i = 0; i < 5; i++) {
const newDiv = document.createElement('div');
newDiv.textContent = `Div ${i + 1}`;
document.body.appendChild(newDiv);
}
使用模板字符串创建复杂结构
通过模板字符串可以创建包含子元素的复杂结构:
div.innerHTML = `
<h3>标题</h3>
<p>段落内容</p>
<button>按钮</button>
`;
替代 document.createElement 的方法
也可以使用 insertAdjacentHTML 方法快速插入 HTML:
document.body.insertAdjacentHTML('beforeend', '<div class="new-div">新内容</div>');
这些方法提供了灵活的方式来动态创建和操作 div 元素,可以根据具体需求选择最适合的方式。






