如何用JavaScript动态创建和嵌套Div元素？前端DOM操作完整教程

来源：IPIPP.com作者：陈平安时间：05-21

导读：本期聚焦于小伙伴创作的《如何用JavaScript动态创建和嵌套Div元素？前端DOM操作完整教程》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何用JavaScript动态创建和嵌套Div元素？前端DOM操作完整教程》有用，将其分享出去将是对创作者最好的鼓励。

创建和嵌套 Div 元素的 JavaScript 教程

在前端开发中，<div> 标签是最常用的容器元素，通过 JavaScript 动态创建和嵌套 <div> 元素，可以实现灵活的页面结构构建，比如动态生成列表、卡片布局、弹窗容器等场景。本文将详细介绍使用 JavaScript 创建 <div> 元素、为元素添加属性、设置样式以及嵌套元素的具体方法。

一、核心方法介绍

要实现动态创建和嵌套 <div>，主要会用到以下几个 DOM 操作方法：

document.createElement()：用于创建指定标签名的 HTML 元素，传入 'div' 即可创建 <div> 元素。
element.appendChild()：将一个子节点添加到指定父节点的子节点列表的末尾，是嵌套元素的核心方法。
element.setAttribute()：用于给元素设置属性，比如 id、class、自定义属性等。
element.style：用于直接设置元素的内联样式。

二、基础示例：创建单个 Div 元素

首先我们来看最基础的场景：创建一个 <div> 元素，设置它的内容和基础样式，然后添加到页面中。

// 创建 div 元素
const singleDiv = document.createElement('div');
// 设置 div 的文本内容
singleDiv.textContent = '这是一个通过 JavaScript 创建的 div 元素';
// 给 div 设置 id 属性
singleDiv.setAttribute('id', 'single-div');
// 给 div 设置内联样式
singleDiv.style.width = '200px';
singleDiv.style.height = '100px';
singleDiv.style.backgroundColor = '#f0f0f0';
singleDiv.style.padding = '10px';
singleDiv.style.border = '1px solid #ccc';
// 将 div 添加到页面的 body 中
document.body.appendChild(singleDiv);

运行上述代码后，页面 body 的末尾会出现一个灰色背景、带边框的 div 容器，内部显示对应的文本内容。如果需要将元素添加到指定容器中，只需要把最后一步的 document.body 替换为对应的容器元素即可，比如通过 document.getElementById('container') 获取目标容器。

三、进阶示例：嵌套 Div 元素

实际开发中经常需要构建多层的 <div> 嵌套结构，比如做一个卡片容器，外层是卡片框架，内层包含标题区域和内容区域。下面的示例演示如何实现这种嵌套结构：

// 创建外层卡片容器 div
const cardContainer = document.createElement('div');
cardContainer.setAttribute('class', 'card');
cardContainer.style.width = '300px';
cardContainer.style.border = '1px solid #e0e0e0';
cardContainer.style.borderRadius = '8px';
cardContainer.style.overflow = 'hidden';
cardContainer.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';

// 创建标题区域 div
const cardTitle = document.createElement('div');
cardTitle.setAttribute('class', 'card-title');
cardTitle.textContent = '动态生成的卡片';
cardTitle.style.padding = '12px 16px';
cardTitle.style.backgroundColor = '#1890ff';
cardTitle.style.color = '#fff';
cardTitle.style.fontSize = '16px';
cardTitle.style.fontWeight = 'bold';

// 创建内容区域 div
const cardContent = document.createElement('div');
cardContent.setAttribute('class', 'card-content');
cardContent.textContent = '这是卡片的内容区域，通过 JavaScript 动态创建并嵌套了三个 div 元素。';
cardContent.style.padding = '16px';
cardContent.style.fontSize = '14px';
cardContent.style.color = '#333';
cardContent.style.lineHeight = '1.5';

// 嵌套元素：将标题和内容 div 添加到卡片容器中
cardContainer.appendChild(cardTitle);
cardContainer.appendChild(cardContent);

// 将完整的卡片容器添加到页面中 id 为 'card-wrapper' 的容器里
const wrapper = document.getElementById('card-wrapper');
if (wrapper) {
  wrapper.appendChild(cardContainer);
} else {
  // 如果没有找到目标容器，就添加到 body 中
  document.body.appendChild(cardContainer);
}

上述代码首先创建了三个 <div> 元素，分别是外层卡片容器、标题区域、内容区域，然后通过 appendChild 方法将标题和内容 div 依次添加到卡片容器中，最后将整个卡片容器添加到页面的指定位置。这样就完成了一个典型的 div 嵌套结构。

四、批量创建并嵌套 Div 的场景

如果需要批量生成多个相似的嵌套 div 结构，比如动态生成商品列表，可以结合循环来实现。下面的示例演示批量创建商品卡片并嵌套到容器中：

// 模拟商品数据
const productList = [
  { id: 1, name: '无线耳机', price: 299, desc: '续航持久，音质清晰' },
  { id: 2, name: '机械键盘', price: 199, desc: '青轴手感，全键无冲' },
  { id: 3, name: '便携鼠标', price: 89, desc: '轻巧便携，静音点击' }
];

// 获取列表容器
const listContainer = document.getElementById('product-list');
// 如果没有容器就创建并添加到 body
if (!listContainer) {
  const container = document.createElement('div');
  container.setAttribute('id', 'product-list');
  container.style.display = 'flex';
  container.style.flexWrap = 'wrap';
  container.style.gap = '16px';
  container.style.padding = '20px';
  document.body.appendChild(container);
  listContainer = container;
}

// 循环创建每个商品卡片
productList.forEach(product => {
  // 创建单个商品卡片容器
  const productCard = document.createElement('div');
  productCard.setAttribute('class', 'product-card');
  productCard.style.width = '200px';
  productCard.style.border = '1px solid #eee';
  productCard.style.borderRadius = '6px';
  productCard.style.padding = '12px';
  productCard.style.boxSizing = 'border-box';

  // 创建商品名称 div
  const productName = document.createElement('div');
  productName.textContent = product.name;
  productName.style.fontSize = '16px';
  productName.style.fontWeight = 'bold';
  productName.style.marginBottom = '8px';

  // 创建商品价格 div
  const productPrice = document.createElement('div');
  productPrice.textContent = `价格：￥${product.price}`;
  productPrice.style.color = '#ff4d4f';
  productPrice.style.fontSize = '14px';
  productPrice.style.marginBottom = '6px';

  // 创建商品描述 div
  const productDesc = document.createElement('div');
  productDesc.textContent = product.desc;
  productDesc.style.fontSize = '12px';
  productDesc.style.color = '#666';

  // 嵌套元素：将名称、价格、描述添加到商品卡片中
  productCard.appendChild(productName);
  productCard.appendChild(productPrice);
  productCard.appendChild(productDesc);

  // 将商品卡片添加到列表容器中
  listContainer.appendChild(productCard);
});

这个示例通过循环遍历商品数据，为每个商品动态创建三层嵌套的 div 结构（卡片容器 > 名称/价格/描述 div），最后统一放入列表容器中，实现了批量生成嵌套元素的需求。

五、注意事项

创建元素后如果不添加到 DOM 树中，元素只会存在于内存中，不会显示在页面上，必须使用 appendChild、insertBefore 等方法将元素插入到已有的 DOM 节点中。
如果频繁操作 DOM 创建大量元素，建议先创建一个文档片段 document.createDocumentFragment()，将所有元素先添加到片段中，最后再把片段一次性插入到 DOM 树，这样可以减少重排重绘，提升性能。
给元素设置样式时，除了直接用 element.style 设置内联样式，也可以通过 element.classList.add() 添加预定义的 CSS 类，更便于样式维护。

JavaScript创建Div 动态DOM操作 appendChild方法元素嵌套前端开发教程

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。