元素同时在两个容器中时，JS逻辑判断为何返回false而非true？

问题背景 #

有4个class为container、id分别是1-4的div容器，点击容器会将id为element1的元素添加到目标容器中。目前遇到的问题是：用&&运算符判断element1是否同时存在于id为1和2的容器时，总是返回"no"，但预期应该返回"yes"；而用||运算符判断元素是否存在于至少一个容器时，逻辑是正常的。

核心原因 #

DOM元素在文档中只能拥有一个父节点。当你调用appendChild()把element1添加到新容器时，浏览器会自动把它从原来的父容器中移除——也就是说，element1永远不可能同时出现在两个不同的容器里，这就是&&判断永远不成立的根本原因。

两种解决方案 #

根据你的实际需求，有两种处理方式：

方案1：追踪元素被添加过的容器（不克隆元素） #

如果你的需求是记录element1曾经被添加到过容器1和容器2，而不是同时显示在两个容器中，可以用一个集合来追踪状态：

<div class="container" id="1" onclick="addElement(this)">容器1</div>
<div class="container" id="2" onclick="addElement(this)">容器2</div>
<div class="container" id="3" onclick="addElement(this)">容器3</div>
<div class="container" id="4" onclick="addElement(this)">容器4</div>
<div id="element1">目标元素</div>

const element1 = document.getElementById('element1');
// 用Set记录元素被添加过的容器ID
const addedContainerIds = new Set();

function addElement(targetContainer) {
  // 将元素移动到目标容器
  targetContainer.appendChild(element1);
  // 记录当前容器ID
  addedContainerIds.add(targetContainer.id);
  // 检查是否添加过容器1和2
  checkPresence();
}

function checkPresence() {
  const existsInBoth = addedContainerIds.has('1') && addedContainerIds.has('2');
  console.log(existsInBoth ? "yes" : "no");
}

方案2：克隆元素，让它同时存在于两个容器 #

如果你的需求是让element1的副本同时显示在容器1和容器2中，需要用cloneNode()克隆元素：

注意：克隆元素时如果保留原id会导致文档中出现重复id，建议给元素加一个类来标识，比如target-element。

<div class="container" id="1" onclick="addElement(this)">容器1</div>
<div class="container" id="2" onclick="addElement(this)">容器2</div>
<div class="container" id="3" onclick="addElement(this)">容器3</div>
<div class="container" id="4" onclick="addElement(this)">容器4</div>
<div id="element1" class="target-element">目标元素</div>

const element1 = document.getElementById('element1');

function addElement(targetContainer) {
  // 克隆元素，true表示深拷贝所有子节点和绑定的事件
  const clonedElement = element1.cloneNode(true);
  // 移除克隆元素的id，避免重复
  clonedElement.removeAttribute('id');
  targetContainer.appendChild(clonedElement);
  // 检查两个容器是否都有目标元素的副本
  checkPresence();
}

function checkPresence() {
  const container1 = document.getElementById('1');
  const container2 = document.getElementById('2');
  
  // 检查容器中是否存在目标元素的副本
  const hasIn1 = container1.querySelector('.target-element') !== null;
  const hasIn2 = container2.querySelector('.target-element') !== null;
  
  console.log(hasIn1 && hasIn2 ? "yes" : "no");
}

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