How can I change div (card) position on button?

Question

I'm using materialize CSS and I have following jsp code.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
  <br><br>
  <div class="row">
    <div class="col s12 l6 pull-l4 ">
      <div id="myBoard" style="width: 600px"></div>
    </div>
    <div class="col s12 l3">
      <div class="card">
        <div class="card-content">
          <div id="clock-black">Inside clock-black</div>
        </div>
      </div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <div class="card">
        <div class="card-content">
          <div id="clock-white">Inside clock-white</div>
        </div>
      </div>
    </div>

    <div class="col s12 l3 push-l1 ">
      <label>Status:</label>
      <div id="status"></div>
      <br><br>
      <a class="btn" id=flip>Flip board</a>
    </div>
  </div>

I want to invert two cards (clock-black and clock-white) by clicking this button. How can I do that?

Answer 1

You can use replaceWith method of jquery to replace one element to another .

Demo Code :

//onclick of button this will get called
$("#flip").click(function() {
//getting div id
  var div1 = $("#clock-white");
  var div2 = $("#clock-black");
  //cloning div
  var $clock_white = div1.clone();
  var $clock_black = div2.clone();
//replace div with other
  div1.replaceWith($clock_black);
  div2.replaceWith($clock_white);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container">
  <br><br>
  <div class="row">
    <div class="col s12 l6 pull-l4 ">
      <div id="myBoard" style="width: 600px"></div>
    </div>
    <div class="col s12 l3">
      <div class="card">
        <div class="card-content">
          <div id="clock-black">Inside clock-black</div>
        </div>
      </div>

      <div class="card">
        <div class="card-content">
          <div id="clock-white">Inside clock-white</div>
        </div>
      </div>
    </div>

    <div class="col s12 l3 push-l1 ">
      <label>Status:</label>
      <div id="status"></div>
      <br><br>
      <a class="btn" id=flip>Flip board</a>
    </div>
  </div>