I want to swap 2 identical HTML elements with JavaScript

Question

I'm having some problems swapping two HTML elements in JavaScript. In the HTML below I want to switch the divs with id of "ans1" with that of id "ans2" using the buttons with id "down1" and "up1".

I don't want to specifically select "ans1" and "ans2" because this is an ordering quiz and the first child element of container 1 and 2 may need to be moved again using these same buttons.

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

In JavaScript I've been trying various versions of the code below. Sometimes the two elements just disappear and sometimes the whole parent element switches position instead of just the child. Can anyone please let me know the correct syntax for switching these two elements so that the child elements can be switched multiple times using the same button?

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

Answer 1

Pretty easy to do with vanilla 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>

NB this relies on the fact that I'm appending an element to the end of the container, so the firstElementChild will still pick up the correct element. You can store these elements in vars before you do the swapping if needed.

Answer 2

I think that this link will help you to solve your problem
How to swap div using Jquery . Apparently you can not set two divs with the same id using jquery that is why he set a third variable to achieve his goal

Answer 3

Thank you for your response. The code works to a certain extent. When I push my "down1" button the 2 elements do switch positions but when I push it again to swap them back, the buttons instead switch positions. When I push the button again(which is now in a wrong position)the elements then switch back and I have to push the button a 4th time to get the buttons back to the way they were too. I've also tried to select a 2nd Id "up1" button to also carryout the same function but this button doesn't work at all. Do you have any ides on on to fix this. I'll share my current code below

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>