Я хочу поменять 2 идентичных элемента HTML на JavaScript

Question

У меня проблемы с заменой двух HTML элементов на JavaScript. В HTML ниже я хочу переключить div с идентификатором «ans1» с идентификатором id «ans2», используя кнопки с идентификатором «down1» и «up1».

Я не хочу специально выбирать «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

Довольно легко сделать с ванилью JS.

document.getElementById('btn').addEventListener('click', () => {
  const c1 = document.getElementById('c1');
  const c2 = document.getElementById('c2');
  c2.appendChild(c1.firstElementChild);
  c1.appendChild(c2.firstElementChild);
});

<div id="c1">
  <div>item 1</div>
</div>

<div id="c2">
  <div>item 2</div>
</div>


<button id="btn">switch</button>

Примечание: это связано с тем, что я добавляю элемент в конец контейнера, поэтому firstElementChild все равно подберет правильный элемент , Вы можете сохранить эти элементы в VAR-файлах, прежде чем выполнять замену, если это необходимо.

Answer 2

Спасибо за ваш ответ. Код работает в определенной степени. Когда я нажимаю sh мою кнопку «вниз1», 2 элемента меняют положение, но когда я нажимаю sh, чтобы снова поменять их, кнопки вместо этого меняют положение. Когда я снова нажимаю sh кнопку (которая сейчас находится в неправильном положении), элементы переключаются обратно, и мне приходится нажимать кнопку sh в 4-й раз, чтобы вернуть кнопки в прежнее положение. Я также пытался выбрать 2-й идентификатор кнопки «up1» для выполнения той же функции, но эта кнопка не работает вообще. Есть ли у вас какие-либо иды, чтобы исправить это. Я поделюсь своим текущим кодом ниже

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>

Answer 3

Я думаю, что эта ссылка поможет вам решить вашу проблему
Как поменять местами div, используя Jquery. Очевидно, вы не можете установить два div с одинаковым идентификатором, используя jquery, поэтому он установил третью переменную для достижения своей цели