How to move an HTML element's content from and to over and over?

Question

How do I add the ability to drag certain content from one element over to another element, and back again, in pure Javascript?

I need this functionality to change the position of the content based on desktop and mobile sizes.

I have made my own function but the problem is that it's not possible to do the last action, to move the content to it's Original position again. It needs some bind functionality I think?

function moveContent(fromid, toid)
{
    // Insert After This
    var ref_el = document.getElementById(toid);
    var parent = ref_el.parentNode;

    // From Element
    var from_el = document.getElementById(fromid);
    if (from_el != null)
    {
        var from_el_parent = from_el.parentNode;
        tparent = from_el.parentNode;
        if (tparent === null || tparent.id !== toid)
        {
            var holder = from_el.outerHTML; 
            from_el.innerHTML = '';

            // Insert inside
            ref_el.innerHTML = holder;  
        }
     }
}

Answer 1

I'm not sure whether how practical your approach is but here is a JavaScript solution which will remove an element from the DOM and append it inside another element.

If the parent element doesn't have an id atribute, one is created using a Counter.

Restoring the element is simply a case of keeping track of the id of the parent element using a data-parent attribute.

(function() {

  var Counter = function () {

    if (Counter.prototype._singletonInstance) {
      return Counter.prototype._singletonInstance;
    }

    Counter.prototype._singletonInstance = this;

    this.getValue = function() {
      if (this.value) {
        this.value++;
      } else {
        this.value = 1;
      }
      return this.value;
    };

  };

  function moveContent(fromId, toId) {
    var from_el = document.getElementById(fromId);
    var target_el = document.getElementById(toId);
    
    if (from_el != null && from_el != target_el) {
      var from_el_parent = from_el.parentNode;
      var parent_id = from_el_parent.getAttribute("id");

      if (!parent_id) {
        // parent element doesn't have an id
        // so generate a new parent id
        var counter = new Counter();
        parent_id = "gen_" + counter.getValue();
        from_el_parent.setAttribute("id", parent_id);
      }

      if (!from_el.getAttribute("data-parent")) {
        // the data-parent attribute is our route home
        from_el.setAttribute("data-parent", parent_id);
      }
      
      // Insert After This
      target_el.appendChild(from_el);
    }
  }
  
  function restoreContent(id) {
    var el = document.getElementById(id);
    var parent = el.getAttribute("data-parent");
    if (parent) {
      // data-parent attribute exists
      var target = document.getElementById(parent);
      if (target) {
        // target is valid
        target.appendChild(el)
      }
    }
  }
  
  document.getElementById("switchAtoB").onclick = function switchAtoB() {
    moveContent("contentA", "parentB");
  }

  document.getElementById("restore").onclick = function restoreA() {
    restoreContent("contentA");
  }

})();

#parentA {
  background-color: #0aa;
  min-height: 100px;
}
#parentB {
  background-color: #aa0;
  min-height: 100px;
}

<div>
 <div id="parentA">
  <div id="contentA">
   <h1>Simple Title</h1>
   <p>Lorem ipsum...</p>
  </div>
 </div>
 <div id="parentB">
  <div id="intro">
   <p>Blah blah blah ...</p>
  </div>
 </div>
 <div>
  <button id="switchAtoB">A -> B</button>
  <button id="restore">Switch Back</button>
 </div>
</div>

Answer 2

Function example

  function ChangeContent(aid,bid)
      {
         if((document.getElementById(aid)!=null)&&(document.getElementById(bid)!=null))
           {
              var atemp=document.getElementById(aid).innerHTML;
              var btemp=document.getElementById(bid).innerHTML;
              document.getElementById(aid).innerHTML=btemp;
              document.getElementById(bid).innerHTML=atemp;
           }
      }

HTML example

    <div id='A'><hr>
      First div content<hr>
    </div>
    <div id='B'>
       <strong>List</strong><br>
        <ul>
          <li>1</li>
          <li>2</li>
          <ul>
            <li>3.1</li>
            <li>3.2</li>
          </ul>
        </ul>
    </div>
    <input type='button' onclick='SwapContent(\"A\",\"B\");' value='Swap'></button>

Notes

You must place JavaScript after HTML, because otherwise JavaScript will not be able to find the elements to swap the content of.

Quotes in "onclick" function parameters are of this type because all code written for PHP+Html printing width ".