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

Question

我在 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>

在 JavaScript 中，我一直在尝试下面代码的各种版本。有时这两个元素会消失，有时整个父元素而不只是子元素会切换位置。谁能告诉我切换这两个元素的正确语法，以便可以使用同一按钮多次切换子元素？

$('#container1:first').appendTo( $('#container2') );

Answer 1

使用 vanilla JS 很容易做到。document.getElementById('btn').addEventListener('click', () => {&nbsp; const c1 = document.getElementById('c1');&nbsp; const c2 = document.getElementById('c2');&nbsp; c2.appendChild(c1.firstElementChild);&nbsp; c1.appendChild(c2.firstElementChild);});<div id="c1">&nbsp; <div>item 1</div></div><div id="c2">&nbsp; <div>item 2</div></div><button id="btn">switch</button>注意，这依赖于我将一个元素附加到容器末尾的事实，因此firstElementChild仍然会拾取正确的元素。如果需要，您可以在进行交换之前将这些元素存储在 vars 中。

Answer 2

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

Answer 3

该代码在一定程度上有效。当我按下“down1”按钮时，两个元素会切换位置，但当我再次按下它以将它们交换回来时，按钮会切换位置。当我再次按下按钮（现在处于错误的位置）时，元素会切换回来，我必须第四次按下按钮才能将按钮恢复到原来的状态。我还尝试选择第二个 Id“up1”按钮来执行相同的功能，但该按钮根本不起作用。你有什么IDE可以解决这个问题吗？我将在下面分享我当前的代码document.getElementById("down1", "up1").addEventListener('click', () => {&nbsp; answerTwoContainer.appendChild(answerOneContainer.firstElementChild);&nbsp; answerOneContainer.appendChild(answerTwoContainer.firstElementChild);});<div id="quiz" class="quiz-container d-none">&nbsp; &nbsp; <div id="question" class="quiz-question"></div>&nbsp; &nbsp; <div id="container1" class="answer-container">&nbsp; &nbsp; &nbsp; &nbsp; <div id="ans1" class="answer"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="button-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="down1" class="down first-button"><i class="fas fa-chevron-down"></i></button></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="container2" class="answer-container">&nbsp; &nbsp; &nbsp; &nbsp; <div id="ans2" class="answer"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="button-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>