Move HTML Element Into Another In Javascript (Simple Examples)

Welcome to a quick tutorial on how to move an HTML element to another container. Working on a custom selection list? Or just want to move a piece of content?

That should cover the basics, but read on for more examples!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

1) MOVE SINGLE ELEMENT

<!-- (A) DEMO STYLES -->
<style>
.first { background: #ffddf1; }
.second { background: #ddfff7; }
</style>
 
<!-- (B) HTML CONTAINERS -->
<div class="first">
  <p>First container.</p>
  <p id="source">Paragraph to move.</p>
</div>
<div class="second" id="target">
  <p>Second container.</p>
</div>
 
<!-- (C) MOVE! -->
<script>
function move () {
  // (C1) GET SOURCE & TARGET ELEMENTS
  var source = document.getElementById("source"),
      target = document.getElementById("target");

  // (C2) MOVE!
  target.appendChild(source);
}
</script>
<input type="button" value="Move" onclick="move()">

This is the “full version” of the above introduction snippet – To move an HTML element, simply use appendChild() to move it into the new container.

 

 

2) MOVE ALL CONTENT

<!-- (A) DEMO STYLES -->
<style>
.first { background: #ffddf1; }
.second { background: #ddfff7; }
</style>

<!-- (B) HTML CONTAINERS -->
<div class="first" id="source">
  <p>First container.</p>
  <p>Some content.</p>
</div>
<div class="second" id="target">
  <p>Second container.</p>
</div>
 
<!-- (C) MOVE! -->
<script>
function move () {
  // (C1) GET SOURCE & TARGET ELEMENTS
  var source = document.getElementById("source"),
  target = document.getElementById("target");

  // (C2) MOVE!
  target.innerHTML += source.innerHTML;
  source.innerHTML = "";
}
</script>
<input type="button" value="Move" onclick="move()">

What if we want to move all content to another container? Just a couple of minor changes here.

• The source element is now the entire <div class="first"> container, the target element is still <div class="second">.
• We duplicate the HTML from first to second – target.innerHTML += source.innerHTML.
• Then empty out the first – source.innerHTML = "".

 

 

3) CUSTOM SELECTION LIST

<!-- (A) DEMO STYLES -->
<style>
#clist { display: flex; }
#first, #second { width: 50%; }
.first { background: #ffddf1; }
.second { background: #ddfff7; }
</style>
 
<!-- (B) HTML CONTAINERS -->
<div id="clist">
  <div class="first" id="first">
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
  </div>
  <div class="second" id="second"></div>
</div>
 
<!-- (C) JAVASCRIPT -->
<script>
window.addEventListener("load", () => {
  // (C1) GET ALL HTML ELEMENTS
  var first = document.getElementById("first"),
      second = document.getElementById("second"),
      all = document.querySelectorAll("#first p");

  // (C2) TOGGLE CONTAINER
  for (let p of all) {
    p.onclick = function () {
      if (this.parentElement == first) {
        second.appendChild(this);
      } else {
        first.appendChild(this);
      }
    }
  }
});
</script>

Lastly, this is a slightly more advanced example of a “toggle list”. But how it works is actually stupidly simply, to toggle an item:

• We simply check which parent container the selected item is currently in – this.parentElement.
• Then let the opposite container adopt the selected item – second.appendChild(this) or first.appendChild(this).

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

LINKS & REFERENCES

• Get Element By Id – MDN
• Append Child – MDN
• Create & Append Elements In HTML – MDN

 

INFOGRAPHIC CHEAT SHEET