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!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

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

 

 

 

LINKS & REFERENCES

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

 

INFOGRAPHIC CHEAT SHEET