如何通过JavaScript DOM操作将容器中首个Div移至末尾（1-2-3→2-3-1）

你的代码存在关键问题：你获取的是第一个.card元素的内部HTML内容（字符串），而非DOM元素本身，导致最终添加到容器末尾的是纯文本，而非原有的.card元素。

错误点拆解 #

1. const firstCard = document.querySelectorAll(".card")[0].innerHTML;
   • innerHTML返回的是元素内部的文本/HTML字符串，不是DOM元素对象。
2. cards[0].remove();
   • 正确移除了第一个.card元素，但此时你手里的firstCard只是字符串，不是被移除的元素。
3. document.getElementById("mainC").appendChild(firstCard);
   • appendChild要求传入DOM元素，传入字符串时浏览器会自动创建文本节点，所以最终容器末尾会多出文本1，而非原有的.card元素。

修复方案（两种简洁写法） #

方案一：利用DOM API自动移动特性（推荐）

DOM的appendChild方法如果传入的元素已经存在于DOM树中，会自动将其从原位置移除并添加到新位置，无需手动调用remove()：

const mainContainer = document.getElementById('mainC');
const firstCard = mainContainer.querySelector('.card'); // 直接取容器内第一个.card
mainContainer.appendChild(firstCard);

方案二：手动移除后添加元素（兼容旧逻辑）

如果你想保留先移除再添加的逻辑，只需确保操作的是DOM元素本身，而非innerHTML：

const firstCard = document.querySelector('#mainC .card'); // 精准定位目标元素
firstCard.remove();
document.getElementById('mainC').appendChild(firstCard);

效果验证 #

执行上述任一代码后，HTML结构会变为：

<div id="mainC">
 <div class="card"> 2 </div>
 <div class="card"> 3 </div>
 <div class="card"> 1 </div>
</div>

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