创建和嵌套 Div 元素的 JavaScript 教程-html教程-PHP中文网

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

聖光之護

发布： 2025-10-11 09:47:01

原创

408人浏览过

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

本文将详细介绍如何使用 javascript 创建 div 元素，并将其嵌套在另一个 div 元素中。我们将通过示例代码演示如何动态创建 html 元素，并解决在多次执行函数时子元素只创建一次的问题，帮助开发者更好地理解和运用 javascript 操作 dom 的相关知识。

使用 JavaScript 动态创建和嵌套 Div 元素

在 Web 开发中，经常需要使用 JavaScript 动态地创建和操作 HTML 元素。本文将重点介绍如何使用 JavaScript 创建 div 元素，并将其嵌套在另一个 div 元素中。

创建基本的 Div 元素

首先，我们需要使用 document.createElement() 方法创建一个新的 div 元素。然后，可以使用 classList.add() 方法为其添加 CSS 类，并通过 appendChild() 方法将其添加到文档的指定容器中。

// 获取容器元素
let container = document.getElementById("container");

function createDiv() {
  // 创建第一个 div 元素
  const firstDiv = document.createElement('div');
  firstDiv.classList.add('class1');

  // 将第一个 div 元素添加到容器中
  container.appendChild(firstDiv);
}

// 调用函数创建 div 元素
createDiv();

登录后复制

嵌套 Div 元素

要在已创建的 div 元素中嵌套另一个 div 元素，可以使用 appendChild() 方法将子元素添加到父元素中。

// 获取容器元素
let container = document.getElementById("container");

function createNestedDiv() {
  // 创建第一个 div 元素
  const firstDiv = document.createElement('div');
  firstDiv.classList.add('class1');
  container.appendChild(firstDiv);

  // 创建第二个 div 元素
  const secondDiv = document.createElement('div');
  secondDiv.classList.add('class2');

  // 将第二个 div 元素添加到第一个 div 元素中
  firstDiv.appendChild(secondDiv);
}

// 调用函数创建嵌套的 div 元素
createNestedDiv();

登录后复制

解决多次执行函数时子元素只创建一次的问题

如果多次执行上述 createNestedDiv() 函数，可能会遇到子元素只创建一次的问题。这是因为每次执行函数时，都会尝试将同一个 secondDiv 元素添加到不同的 firstDiv 元素中。由于一个 DOM 元素只能有一个父元素，因此只有第一次执行时会成功，后续执行则会将该元素从原来的父元素中移除并添加到新的父元素中，导致最终只有一个 firstDiv 元素包含 secondDiv 元素。

立即学习“Java免费学习笔记（深入）”；

Detail Admin响应式后台管理模板

Detail Admin响应式后台管理模板基于Bootstrap2.3.1制作，主题干净、优雅，适合任何后端应用程序。使用最新的HTML5和CSS3功能创建。内置Sass和侧重于简单和人性化。兼容PC端和手机移动端，全套模板，包括首页、登录页、排行榜、用户、表单、图库、日历、表格、图标、UI元素等21个后台模板页面。

184

查看详情

为了解决这个问题，每次执行函数时都应该创建一个新的 secondDiv 元素。

// 获取容器元素
let container = document.getElementById("container");

function createNestedDiv() {
  // 创建第一个 div 元素
  const firstDiv = document.createElement('div');
  firstDiv.classList.add('class1');
  container.appendChild(firstDiv);

  // 创建第二个 div 元素
  const secondDiv = document.createElement('div');
  secondDiv.classList.add('class2');

  // 将第二个 div 元素添加到第一个 div 元素中
  firstDiv.appendChild(secondDiv);
}

// 多次调用函数创建嵌套的 div 元素
createNestedDiv();
createNestedDiv();

登录后复制

完整示例代码

以下是一个完整的示例代码，演示了如何创建和嵌套 div 元素，并解决多次执行函数时子元素只创建一次的问题。

<!DOCTYPE html>
<html>
<head>
  <title>创建和嵌套 Div 元素</title>
</head>
<body>
  <div id="container"></div>

  <script>
    // 获取容器元素
    let container = document.getElementById("container");

    function createNestedDiv() {
      // 创建第一个 div 元素
      const firstDiv = document.createElement('div');
      firstDiv.classList.add('class1');
      container.appendChild(firstDiv);

      // 创建第二个 div 元素
      const secondDiv = document.createElement('div');
      secondDiv.classList.add('class2');

      // 将第二个 div 元素添加到第一个 div 元素中
      firstDiv.appendChild(secondDiv);
    }

    // 多次调用函数创建嵌套的 div 元素
    createNestedDiv();
    createNestedDiv();

    console.log(container.innerHTML);
  </script>
</body>
</html>

登录后复制

注意事项

确保在 JavaScript 代码执行之前，HTML 结构已经加载完毕。可以将 JavaScript 代码放在 </body> 标签之前，或者使用 DOMContentLoaded 事件监听器。
在创建和操作 DOM 元素时，要注意性能问题。频繁地操作 DOM 可能会导致页面卡顿。可以考虑使用 DocumentFragment 来批量操作 DOM 元素，减少重绘和回流。
避免使用字符串拼接的方式创建 HTML 元素，这可能会导致安全问题（例如 XSS 攻击）。推荐使用 document.createElement() 方法创建元素，并使用 textContent 或 setAttribute() 方法设置元素的属性。