Let's assume that I have this structure

 <div class="firstDiv">
  <div class="insideDiv"></div>
 </div>
 <div class="secondDiv"></div>
 <div class="thirdDiv"></div>

How can I move the .insideDiv from the .firstDiv to the .thirdDiv but going through the .secondDiv ?

I need just a hint or an idea. Thank you!

Let's assume that I have this structure

 <div class="firstDiv">
  <div class="insideDiv"></div>
 </div>
 <div class="secondDiv"></div>
 <div class="thirdDiv"></div>

How can I move the .insideDiv from the .firstDiv to the .thirdDiv but going through the .secondDiv ?

I need just a hint or an idea. Thank you!

• javascript
• html
• css

• 3 What do you mean by going through? – Axnyff Commented Feb 22, 2018 at 17:24
• Can you provide any code that you have written to try this? – VtoCorleone Commented Feb 22, 2018 at 17:25
• I mean not passing by .secondDiv . When the "event" it's triggered the .insideDiv should move inside the .secondDiv and if the event it's triggered again the .insideDiv moves to .thirdDiv – Daniel Bisceanu Commented Feb 22, 2018 at 17:27
• 1 .addEventListener() + .querySelector() + (.appendChild() or .insertAdjacentElement()) – Andreas Commented Feb 22, 2018 at 17:30
• 1 @DanielBisceanu to place/move an element on top of another element, you can set the position of the movable element to absolute so it is taken out of the normal document flow. It seems to that you are attempting to do something difficult without grasping the basics first – Huangism Commented Feb 22, 2018 at 17:46

2 Answers 2

In vanilla JS, it works like this:

var moveIt = function() {
  var outerDiv = document.getElementsByClassName('insideDiv')[0].parentElement;
  var innerDiv = document.getElementsByClassName('insideDiv')[0];

  if (outerDiv.nextElementSibling != null) {
    outerDiv.nextElementSibling.appendChild(outerDiv.removeChild(innerDiv));
  }
}

.firstDiv {
  background-color: yellow
}

.secondDiv {
  background-color: lightblue
}

.thirdDiv {
  background-color: lightpink
}

<div class="container">
  <div class="firstDiv">first
    <div class="insideDiv">inside div</div>
  </div>
  <div class="secondDiv">second</div>
  <div class="thirdDiv">third</div>
</div>

<button type="button" onclick="moveIt()">Move it!</button>

OPTIONAL: wrap-around in else statement below, this needs a scope to operate in. (set by div-element of class 'container'), to be added to above if statement.

else { outerDiv.parentElement.firstElementChild.appendChild(outerDiv.removeChild(innerDiv));
  }

You can see a working example here: codepen: move child-element to nextSibling

If you don't mind using jquery:

   <div class="firstDiv">
      <div class="insideDiv">InsideBaseball</div>
   </div>
   <div class="secondDiv">SecondBase</div>
   <div class="thirdDiv">ThirdBase</div>
     <button id="SwapButton"> Swap! </button>  


<script>

document.getElementById("SwapButton").onclick = function () { 
    var content = $('.insideDiv').html();
    var content2 = $('.thirdDiv').html();
    $('.thirdDiv').replaceWith(content);
    $('.insideDiv').replaceWith(content2);
  };
</script>