如何使用appendChild()创建包含全部子元素的Target容器？

方法1：手动创建所有子元素并组装 #

直接通过JavaScript逐个构建Target内的每一个子元素，设置好内容、属性后依次组装到Target容器中，最后将完整的Target添加到页面指定位置。

示例代码：

// 获取按钮和父容器
const newTargetBtn = document.querySelector('button');
const parentContainer = newTargetBtn.parentElement;

newTargetBtn.addEventListener('click', () => {
  // 创建Target主容器
  const targetBox = document.createElement('div');
  targetBox.classList.add('target'); // 对应浅灰色盒子的CSS类

  // 创建Layout文本
  const layoutText = document.createElement('span');
  layoutText.textContent = 'Layout: x by x';

  // 创建下拉选择框
  const selectBox = document.createElement('select');
  // 添加下拉选项
  ['1x1', '2x2', '3x3'].forEach(opt => {
    const option = document.createElement('option');
    option.value = opt;
    option.textContent = opt;
    selectBox.appendChild(option);
  });

  // 创建红色可拖拽盒子
  const dragBox = document.createElement('div');
  dragBox.classList.add('drag-box'); // 对应红色拖拽框的CSS类
  dragBox.setAttribute('draggable', 'true');

  // 组装所有子元素到Target容器
  targetBox.appendChild(layoutText);
  targetBox.appendChild(selectBox);
  targetBox.appendChild(dragBox);

  // 将完整Target添加到按钮旁
  parentContainer.insertBefore(targetBox, newTargetBtn.nextSibling);
});

方法2：使用HTML模板（更简洁） #

先在HTML中定义一个隐藏的<template>标签，写入完整的Target结构，点击按钮时克隆模板内容并插入页面。

HTML部分：

<template id="target-template">
  <div class="target">
    <span>Layout: x by x</span>
    <select>
      <option value="1x1">1x1</option>
      <option value="2x2">2x2</option>
      <option value="3x3">3x3</option>
    </select>
    <div class="drag-box" draggable="true"></div>
  </div>
</template>

<button>NEW TARGET</button>

JS部分：

const newTargetBtn = document.querySelector('button');
const parentContainer = newTargetBtn.parentElement;
const targetTemplate = document.getElementById('target-template');

newTargetBtn.addEventListener('click', () => {
  // 克隆模板内容（true表示深度克隆所有子元素）
  const newTarget = targetTemplate.content.cloneNode(true);
  // 插入到按钮旁边
  parentContainer.insertBefore(newTarget, newTargetBtn.nextSibling);
});

关键注意事项 #

• 确保给各个元素配置对应的CSS类（如.target、.drag-box），才能呈现浅灰色盒子、红色拖拽框的样式
• 如果需要动态修改「Layout: x by x」的数值，可在创建/克隆元素后，通过textContent更新文本
• 拖拽功能需额外实现dragstart等事件监听，可在元素创建后绑定对应的事件处理函数

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