我想用JavaScript交换两个相同的HTML元素

在JavaScript中交换两个HTML元素时遇到一些问题。在下面的HTML中，我想使用id为“down1”和“up1”的按钮将id为“ans1”的div与id为“ans2”的div切换

我不想特别选择“ans1”和“ans2”，因为这是一个排序测验，可能需要使用这些相同的按钮再次移动容器1和2的第一个子元素

<div id="quiz" class="quiz-container d-none">
  <div id="question" class="quiz-question"></div>
  <div id="container1" class="answer-container">
    <div id="ans1" class="answer"></div>
    <div class="button-container">
      <button id="down1" class="down first-button"><i class="fas fa-chevron-down"></i></button></div>
  </div>
  <div id="container2" class="answer-container">
    <div id="ans2" class="answer"></div>
    <div class="button-container">
      <button id="up1" class="up1"><i class="fas fa-chevron-up"></i></button><button id="down2" class="down"><i class="fas fa-chevron-down"></i></button>
    </div>

---

我认为此链接将帮助您解决问题
.

---

显然，您不能使用jquery设置两个id相同的div，这就是为什么他设置第三个变量来实现他的目标

使用vanilla JS非常容易

document.getElementById（'btn'）.addEventListener（'click'，（）=>{
常量c1=document.getElementById（'c1'）；
const c2=document.getElementById（'c2'）；
c2.附属儿童（c1.第一元素儿童）；
c1.附属物儿童（c2.第一元素儿童）；
});

项目1
项目2
切换
谢谢您的回复。代码在一定程度上起作用。当我按下“down1”按钮时，这两个元素会切换位置，但当我再次按下按钮将它们调回时，按钮会切换位置。当我再次按下按钮（现在处于错误位置）时，元素会切换回来，我必须第四次按下按钮才能使按钮恢复到原来的状态。我也尝试过选择第二个Id“up1”按钮来执行相同的功能，但这个按钮根本不起作用。您是否有任何IDE来修复此问题。我将在下面分享我当前的代码

document.getElementById("down1", "up1").addEventListener('click', () => {
  answerTwoContainer.appendChild(answerOneContainer.firstElementChild);
  answerOneContainer.appendChild(answerTwoContainer.firstElementChild);

}))


你好，mpen。谢谢你的回复。代码在一定程度上起作用。当我按下“down1”按钮时，这两个元素会切换位置，但当我再次按下按钮将它们调回时，按钮会切换位置。当我再次按下按钮（现在处于错误位置）时，元素会切换回来，我必须第四次按下按钮才能使按钮恢复到原来的状态。我也尝试过选择第二个Id“up1”按钮来执行相同的功能，但这个按钮根本不起作用。您是否有任何IDE来修复此问题。我将在下面共享我的当前代码。@MarkMcClean可能希望将按钮移出容器，或者使用更具体的选择器来避免将按钮作为目标。看起来你已经有了一个“答案”类，所以只需做
。答案：首先
，也许吧？在我发送最后一个回复后，我意识到我应该将按钮移出容器，这样测验现在就可以很好地进行了。谢谢。我想做的下一件事是在这个函数中添加一个半秒的动画，这样你就可以看到元素在屏幕上交换，而不是仅仅出现在屏幕上。关于如何做到这一点有什么想法吗？基本动画在CSS中很容易，但对于交换动画，您需要计算它们的确切位置。我要做的是将他们的
位置
更改为
绝对位置
，使用
getBoundingClientRect
获取他们的位置…然后在两个位置之间创建CSS动画，然后将他们的位置更改回静态。祝你好运
document.getElementById("down1", "up1").addEventListener('click', () => {
  answerTwoContainer.appendChild(answerOneContainer.firstElementChild);
  answerOneContainer.appendChild(answerTwoContainer.firstElementChild);

<div id="quiz" class="quiz-container d-none">
    <div id="question" class="quiz-question"></div>
    <div id="container1" class="answer-container">
        <div id="ans1" class="answer"></div>
        <div class="button-container">
            <button id="down1" class="down first-button"><i class="fas fa-chevron-down"></i></button></div>
    </div>
    <div id="container2" class="answer-container">
        <div id="ans2" class="answer"></div>
        <div class="button-container">
            <button id="up1" class="up"><i class="fas fa-chevron-up"></i></button><button id="down2" class="down"><i class="fas fa-chevron-down"></i></button>
        </div>
    </div>