Wie verschiebt man den Inhalt eines HTML-Elements von und zu immer und immer wieder?

Question

Wie füge ich die Fähigkeit hinzu, bestimmten Inhalt von einem Element zu einem anderen Element und wieder zurück zu ziehen, in reinem Javascript?

Ich brauche diese Funktionalität, um die Position des Inhalts basierend auf Desktop- und mobilen Größen zu ändern.

Ich habe meine eigene Funktion gemacht, aber das Problem ist, dass es nicht möglich ist, die letzte Aktion auszuführen, um den Inhalt wieder auf seine ursprüngliche Position zu verschieben. Es braucht etwas Bind Funktionalität, denke ich?

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

Funktionsbeispiel

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 Beispiel

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

Hinweise

Sie JavaScript legen müssen nach HTML, weil sonst JavaScript nicht in der Lage ist, die Elemente zu finden, mit denen der Inhalt ausgetauscht werden kann.

Zitate in „Onclick“ Funktionsparameter sind von dieser Art, da alle Code geschrieben für PHP + Html Druckbreite“.

Answer 2

Ich bin nicht sicher, ob, wie praktisch Ihr Ansatz ist aber hier ist eine Lösung JavaScript denen ein Element aus dem DOM entfernen und es in einem anderen Element anhängen.

Wenn das übergeordnete Element kein id atribute hat, wird man mit einem Zähler erstellt.

das Element Wiederherstellung ist einfach ein Fall von Verfolgung der id des Elternelements mit einem data-parent Attribut.

(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>