如何围绕父元素径向动态创建子元素？技术求助

问题1：无法添加多个子元素 #

你当前仅在初始化时创建了一个newDust元素，每次点击按钮只是将这个元素重新追加到父元素中——DOM中同一个元素节点不能重复存在，所以看起来始终只有一个元素。

解决方法：将元素创建逻辑移到点击事件内部，每次点击都生成全新的div：

// 把元素创建移到点击事件里
createDust.addEventListener("click", () => {
  const newDust = document.createElement("div");
  newDust.className = "dust";
  // ...后续位置设置
});

问题2：父元素旋转影响子元素位置 #

旋转父元素会改变整个容器的坐标系，导致所有子元素跟着旋转。更可靠的径向定位方式是用三角函数计算子元素的绝对偏移量，让每个子元素基于中心元素独立定位，完全不依赖父元素的变换。

核心思路：

• 随机生成角度（0-360度）和距离（自定义范围）
• 用Math.cos和Math.sin计算x、y方向的偏移（需将角度转换为弧度）
• 直接设置子元素的位置属性，让它相对于中心元素独立定位

问题3：子元素translate互相影响 #

当每个子元素都使用独立的坐标计算后，各自的位置/变换属性都是独立的，不会互相干扰，也不需要切换类来脱离父元素关联。

修改后的完整代码 #

HTML

<div id="playArea">
    <div id="center"></div>
</div>
<div>
    <button id="createDust" type="button">CREATE DUST</button>
</div>

CSS

body {
    height: 100vh;
    background-color: #3c3c3b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: Arial;
}

#center {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #62bbc1;
    position: fixed;
}

.dust {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #735cdd;
    position: fixed;
}

JavaScript

const createDust = document.getElementById("createDust");
const center = document.getElementById("center");

// 生成随机弧度（对应0-360度）
function getRandomRadian() {
    return Math.random() * Math.PI * 2;
}

// 生成随机距离（自定义范围，这里取50-250px）
function getRandomDistance(min = 50, max = 250) {
    return Math.random() * (max - min) + min;
}

createDust.addEventListener("click", () => {
    // 每次点击创建新的dust元素
    const dust = document.createElement("div");
    dust.className = "dust";

    // 获取中心元素的视口位置
    const centerRect = center.getBoundingClientRect();
    const centerX = centerRect.left + centerRect.width / 2;
    const centerY = centerRect.top + centerRect.height / 2;

    // 计算子元素的偏移量
    const radian = getRandomRadian();
    const distance = getRandomDistance();
    const offsetX = Math.cos(radian) * distance;
    const offsetY = Math.sin(radian) * distance;

    // 设置子元素位置（减去自身一半宽高，让中心对齐计算点）
    dust.style.left = `${centerX + offsetX - 5}px`;
    dust.style.top = `${centerY + offsetY - 5}px`;

    document.body.appendChild(dust);
});

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