如何利用ES6或jQuery优化多DOM元素创建，实现指定嵌套结构？

当然有更简洁优雅的实现方式！不管是用原生ES6特性还是jQuery，都能大幅减少冗余代码，让DOM结构的创建和嵌套逻辑更清晰直观。下面给你两种常用的优化方案：

一、原生ES6优化方案 #

原生JS结合ES6模板字符串，可以直接把完整的DOM结构以字符串形式定义，避免一个个创建元素的繁琐操作，结构一目了然。

基础实现（快速插入） #

// 用模板字符串定义完整的DOM结构，层级关系和最终HTML完全对应
const classSectionHTML = `
<div class="classes" data-class="XII">
  <button onclick="tog('XII')" class="btn btn-block text-mono btn-outline-secondary">XII</button>
  <div id="XII" style="display: none;">
    <div class="card mb-3 text-center bg-secondary text-light border-0">
      <div class="card-body">
        <blockquote class="card-blockquote">
          <h2 class="display-4">XII</h2>
          <hr class="my-4">
          <p class="lead">XII has 5 days per week and will study 6 subjects per day</p>
          <p>During the week they will study: Mathematics, Physics, Biology, etc.</p>
          <button class="btn btn-shadow text-mono btn-danger">Delete</button>
        </blockquote>
      </div>
    </div>
  </div>
</div>
`;

// 插入到页面的目标容器中（比如body，或者某个指定父元素）
document.body.insertAdjacentHTML('beforeend', classSectionHTML);

进阶实现（避免内联事件） #

如果想遵循现代JS规范，避免内联onclick事件，可以先创建元素再绑定监听：

// 将模板字符串转换为DOM片段，同时获取容器引用
const classContainer = document.createRange().createContextualFragment(classSectionHTML).firstElementChild;

// 获取按钮元素
const toggleBtn = classContainer.querySelector('.btn-outline-secondary');
const deleteBtn = classContainer.querySelector('.btn-danger');

// 移除内联事件，改用addEventListener绑定
toggleBtn.removeAttribute('onclick');
toggleBtn.addEventListener('click', () => tog('XII'));

deleteBtn.addEventListener('click', () => {
  // 实现删除逻辑，比如移除整个班级模块
  classContainer.remove();
});

// 插入到DOM中
document.body.appendChild(classContainer);

优势：无需声明大量DOM变量，模板字符串完全对应最终HTML结构，修改和维护更方便，同时保持原生JS的性能优势。

二、jQuery实现方案 #

如果你的项目已经引入了jQuery，那DOM操作会变得更简洁，语法更直观：

// 直接将HTML结构插入到目标容器
$('body').append(`
<div class="classes" data-class="XII">
  <button class="btn btn-block text-mono btn-outline-secondary">XII</button>
  <div id="XII" style="display: none;">
    <div class="card mb-3 text-center bg-secondary text-light border-0">
      <div class="card-body">
        <blockquote class="card-blockquote">
          <h2 class="display-4">XII</h2>
          <hr class="my-4">
          <p class="lead">XII has 5 days per week and will study 6 subjects per day</p>
          <p>During the week they will study: Mathematics, Physics, Biology, etc.</p>
          <button class="btn btn-shadow text-mono btn-danger">Delete</button>
        </blockquote>
      </div>
    </div>
  </div>
</div>
`);

// 绑定事件（推荐使用jQuery的事件绑定，替代内联事件）
$('.classes[data-class="XII"] .btn-outline-secondary').on('click', () => tog('XII'));
$('.classes[data-class="XII"] .btn-danger').on('click', function() {
  // 向上查找并移除整个班级模块
  $(this).closest('.classes').remove();
});

优势：jQuery的选择器和链式调用让DOM操作更省心，代码量更少，适合快速开发场景，事件绑定和DOM遍历也更灵活。

对比总结 #

你原来的写法需要逐个声明DOM变量、手动设置属性和嵌套关系，不仅代码冗余，而且层级关系不直观，后期修改容易出错。而上面两种优化方案的核心都是用模板字符串直接描述最终DOM结构，让代码逻辑和页面结构一一对应，大幅降低维护成本：

• 若项目无jQuery依赖，优先选择原生ES6方案，兼顾性能和可读性；
• 若已有jQuery，用jQuery方案可以进一步简化代码。

内容的提问来源于stack exchange，提问作者R0xx0rZzz