用 JS 创建 div - Javascript

在网页开发的过程中，我们常常需要在 DOM 树中动态地创建和修改元素。其中，最常见的元素可能就是 div 了。在 Javascript 中，我们可以用几种方法来创建 div 元素。

1. 使用 document.createElement 方法

我们可以使用 document.createElement 方法来创建一个空的 div 元素，并设置其属性以及添加子元素。

// 创建一个 div 元素
const newDiv = document.createElement('div');

// 设置新元素的样式，如宽度、高度、背景颜色等
newDiv.style.width = '100px';
newDiv.style.height = '100px';
newDiv.style.backgroundColor = 'red';

// 给新元素添加子元素（可以是任何元素）
const p = document.createElement('p');
p.textContent = '这是一个新 div 元素';

newDiv.appendChild(p);

// 将新元素添加到 DOM 树中的某个父元素中
const parentDiv = document.querySelector('.parent');
parentDiv.appendChild(newDiv);

2. 使用 innerHTML 属性

我们可以使用 innerHTML 属性来动态设置一个元素的内容，并将其插入到 DOM 树中。

const parentDiv = document.querySelector('.parent');

// 使用 innerHTML 属性设置 div 元素，并添加子元素
parentDiv.innerHTML = '<div style="width: 100px; height: 100px; background-color: red;"><p>这是一个新的 div 元素</p></div>';

需要注意的是，使用 innerHTML 属性时需要谨慎，因为它有被 XSS 攻击的风险。

3. 使用 insertAdjacentHTML 方法

我们可以使用 insertAdjacentHTML 方法来在一个元素的指定位置插入 HTML 代码。

const parentDiv = document.querySelector('.parent');

// 在 parentDiv 元素的末尾插入一个新的 div 元素
parentDiv.insertAdjacentHTML('beforeend', '<div style="width: 100px; height: 100px; background-color: red;"><p>这是一个新的 div 元素</p></div>');

insertAdjacentHTML 方法接受两个参数，第一个参数是插入位置，可以是 "beforebegin"、"afterbegin"、"beforeend"、"afterend" 中的一个。第二个参数是要插入的 HTML 代码。

以上是创建 div 元素的三种常用方法，根据实际需要选择方法即可。