如何仅在存在指定sibling元素时修改对应的child元素？

你的核心需求是：将每个.parent容器内的.sibling元素，移动到同容器内的.child元素中；若某个.parent没有对应的.child，则保留该.sibling不动，避免错误迁移到其他容器。

原代码的问题 #

1. 错误使用insertAdjacentHTML：该方法的第二个参数需要是HTML字符串，但你传入的是DOM元素对象，实际执行时会把元素转为字符串（如[object HTMLDivElement]）插入，而非真正移动DOM元素。
2. 未校验.child是否存在：当某个.parent没有.child时，parents[i].querySelector('.child')会返回null，此时调用insertAdjacentHTML会触发错误，甚至导致后续逻辑异常，让sibling错误聚集到之前的容器中。

修正后的代码 #

以下是修复后的完整实现，确保每个sibling只移动到自身所属.parent的.child中：

HTML

<div class="parent">
  <div class="sibling">Num 1</div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="sibling">Num 2</div>
  <div class="child"></div>
</div>
<div class="button" onclick="appendSibling()"></div>

CSS

.parent {
  position: relative;
  background-color: grey;
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: orange;
  width: 30px;
  height: 10px;
}

.sibling {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: blue;
  width: 30px;
  height: 10px;
  font-size: 10px;
  color: white;
}

.button {
  width: 30px;
  height: 30px;
  background-color: red;
  cursor: pointer;
}

JavaScript

function appendSibling() {
  // 获取所有parent容器
  const parents = document.querySelectorAll('.parent');
  
  parents.forEach(parent => {
    // 只查找当前parent内部的sibling和child
    const sibling = parent.querySelector('.sibling');
    const child = parent.querySelector('.child');
    
    // 只有当两者都存在时，才执行移动操作
    if (sibling && child) {
      // 使用appendChild移动DOM元素，而非插入HTML
      child.appendChild(sibling);
      // 如果需要插入到child的开头，用insertBefore：
      // child.insertBefore(sibling, child.firstChild);
    }
  });
}

关键改进点 #

• 使用document.querySelectorAll替代getElementsByClassName：返回的是静态节点列表，避免遍历过程中DOM结构变化导致的索引异常。
• 对每个parent单独查找内部的sibling和child：确保操作的是当前容器内的元素，不会跨容器错误迁移。
• 使用appendChild移动DOM元素：这是正确的DOM节点移动方式，直接将元素从原位置移到目标位置，无需处理HTML字符串。

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