如何通过JavaScript将HTML元素插入index.html指定容器并实现flex布局

需要实现两个效果：

• 通过JS动态生成的卡片元素插入到指定容器内
• 卡片使用flex布局排列，避免出现错乱排版
  当前已使用insertAdjacentHTML向class为note的元素插入卡片内容，但生成的元素始终无法放入目标容器，错乱效果如下：
  
  现有实现代码：

const addBtn = document.getElementById("add");

const addNewNote = (text = "") => {
  const note = document.createElement("div");
  note.classList.add("note");

  const htmlData = `<div class="card m-4" style="width: 18rem">
        <div class="card-body">
          <div class="d-flex justify-content-between">
            <h5 class="card-title">Card title</h5>
            <span class="icons">
              <button class="btn btn-primary">
                <i class="bi bi-pencil-square"></i>
              </button>
              <button class="btn btn-primary">
                <i class="bi bi-trash"></i>
              </button>
            </span>
          </div>
          <hr />

          <p class="card-text">
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
        </div>
      </div>`;

  note.insertAdjacentHTML("afterbegin", htmlData);
  console.log(note);

  document.body.appendChild(note);
};

addBtn.addEventListener("click", () => {
  addNewNote();
});

1. 修正元素插入的目标节点 #

核心问题：当前代码最后一行直接把note元素挂载到了document.body下，自然不会进入预设的卡片容器
首先在HTML中提前定义好专门承载卡片的容器，直接给容器加flex布局类实现自动排列、换行、间距效果，不需要额外写CSS：

<div id="note-container" class="d-flex flex-wrap gap-3 p-4"></div>

把JS中最后插入元素的代码替换为指向这个容器：

// 移除原有的 document.body.appendChild(note);
document.getElementById("note-container").appendChild(note);

2. 优化冗余DOM嵌套（可选） #

当前逻辑会额外创建一层class为note的div包裹卡片，属于不必要的嵌套，可以直接把卡片HTML插入容器，简化DOM结构：

const addBtn = document.getElementById("add");

const addNewNote = (text = "") => {
  const cardHTML = `<div class="card" style="width: 18rem">
        <div class="card-body">
          <div class="d-flex justify-content-between">
            <h5 class="card-title">Card title</h5>
            <span class="icons">
              <button class="btn btn-primary">
                <i class="bi bi-pencil-square"></i>
              </button>
              <button class="btn btn-primary">
                <i class="bi bi-trash"></i>
              </button>
            </span>
          </div>
          <hr />
          <p class="card-text">
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
        </div>
      </div>`;
  // 直接追加到容器末尾
  document.getElementById("note-container").insertAdjacentHTML("beforeend", cardHTML);
};

addBtn.addEventListener("click", () => {
  addNewNote();
});

修改完成后，新生成的卡片会直接进入指定容器，flex布局会自动处理卡片排列，超出容器宽度自动换行，不会再出现排版错乱的问题。

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