Teleport content between two containers based on a flag.

by Osvaldo

HTML

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.3/dist/cdn.min.js"></script>

<div id="container1"></div>

<div x-data="{ moveIt: false }">

  <template x-teleport="#container1" x-if="moveIt">
    <div>
      <h1>This goes to container1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </template>

  <template x-teleport="#container2" x-if="moveIt">
    <div>
      <h1>This goes to container2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </template>
</div>

<div id="container2"></div>