How to Move an Element into Another Element

How to move an element into another element?

You may want to use the appendTo function (which adds to the end of the element):

$("#source").appendTo("#destination");

Alternatively you could use the prependTo function (which adds to the beginning of the element):

$("#source").prependTo("#destination");

Example:

$("#appendTo").click(function() {  $("#moveMeIntoMain").appendTo($("#main"));});$("#prependTo").click(function() {  $("#moveMeIntoMain").prependTo($("#main"));});

#main {  border: 2px solid blue;  min-height: 100px;}
.moveMeIntoMain {  border: 1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="main">main</div><div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>
<button id="appendTo">appendTo main</button><button id="prependTo">prependTo main</button>

jQuery: move the complete element into another one, but not its content only

$.contents() will grab the content of the element, but leave the element itself alone. The default behavior of $.append() and $.appendTo() is to move the entire element. So in your example, you simply need to use jQuery('.source').appendTo('.destination') and that will move .source in to .destination

jQuery('.source').appendTo('.destination')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="source">Move Me</div><div class="destination"></div>

move an element from a div to another div

In vanilla JS, it works like this:

var moveIt = function() {  var outerDiv = document.getElementsByClassName('insideDiv')[0].parentElement;  var innerDiv = document.getElementsByClassName('insideDiv')[0];
  if (outerDiv.nextElementSibling != null) {    outerDiv.nextElementSibling.appendChild(outerDiv.removeChild(innerDiv));  }}

.firstDiv {  background-color: yellow}
.secondDiv {  background-color: lightblue}
.thirdDiv {  background-color: lightpink}

<div class="container">  <div class="firstDiv">first    <div class="insideDiv">inside div</div>  </div>  <div class="secondDiv">second</div>  <div class="thirdDiv">third</div></div>
<button type="button" onclick="moveIt()">Move it!</button>

Move and/or drag element back and forth from div to div and capture it's div string dynamically

So if i've understood correctly you wish to move all the elements to either child or parent div, not just swapping the elements.

What you can do is to append the elements. the insertAfter puts the element after the div, just as you did with the drop element. I've Chosen to loop through the id's on the elements that was to be moved by the click event, and then append these to the parent or child DIV element. I have changed the ID's for semantic reason in for coding the loop. This should solve your problem.

function Parent() {
for (var i = 1; i <= 3; i++) {
    $("#parent").append($("#parentElement" + i));
    $("#parent").append($("#childElement" + i));
    }
}
function Child() {
for (var i = 1; i <= 3; i++) {
    $('#child').append($("#parentElement" + i));
    $("#child").append($("#childElement" + i));   
    }
}

Also, I see no reason using the php tags and echo for the span elements, works fine without it :)

Move div content into another div using pure javascript

I personally prefer insertAdjacentElement as it gives you more control as to where to put elements, but be careful to take note of its browser support.

const one = document.querySelector('.one');const two = document.querySelector('.two');
[...two.children].forEach(element => {  one.insertAdjacentElement('beforeEnd', element);});

<div class="one">    <div class="text">One</div>    <div class="text">One</div></div>
<div class="two">    <div class="text">Two</div>    <div class="text">Two</div></div>

How to move a element move from one div to other and able to return to main div

I think you'll need "delegated events" to allow for handling clicks on items which didn't exist when the original event handler was declared - the event handler will normally only attach to elements which are actually present and match the selector when the handler is created. Clearly, your moved elements don't fulfil that criteria.

Using delegated events, this problem is removed because the event is attached to an element higher up the DOM, which you know will always exist. You then tell jQuery to only actually execute the callback if it turns out that the underlying target of the event matched the second selector (given in the function parameters). This gets evaluated at the time the event occurs, rather than when the event handler was first created.

Demo:

$(".low-filter-tags").on("click", "a.low-filter-label", function() {  $(this).detach().appendTo($('.low-filter-search'));});$(".low-filter-search").on("click", "a.low-filter-label", function() {  $(this).detach().appendTo($('.low-filter-tags'));});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="low-filter">  <div class="low-filter-tags">    <a class="low-filter-label">                Mobile                <i class="fa fa-times"></i>            </a>    <a class="low-filter-label">                Smartphone                <i class="fa fa-times"></i>            </a>    <a class="low-filter-label">                Laptop                <i class="fa fa-times"></i>            </a>
  </div>  <div class="low-filter-search">
  </div></div>

How can I convert one html element to another element?

Here is some code that will transform any html code received from your backend into the desired format. No matter what kind of and how many elements
are encountered, they will be converted into <text> elements with .classNames composed of their id (if available), their original .className and their original .tagName (in lower case):

const htmlArr=[`<div>
   <h2 id="Title">Here is an H2</h2>
   <article class="ContentArticle">
   There are some articles.
   </article>
</div>`,
`<div>
   <h2 id="Title">Here is another H2</h2>
   <article class="ContentArticle">
   And here are some more.
   </article>
</div>`,
`<div>
   <h3 id="Title">Here is an H3 heading</h3>
   <article class="ContentSubArticle">
   This is a sub-article.
   </article>
</div>`];

document.body.innerHTML=htmlArr.map(d=>{
 let div=document.createElement("div");
 div.innerHTML=d;
 return '<view class="div">'+[...div.children[0].children].map(e=>`<text class="${((e.id||"")+" "+e.className).trim()} ${e.tagName.toLowerCase()}">${e.innerHTML}</text>`).join("")+'</view>';
}).join("\n");

console.log(document.body.innerHTML)

Move Div element from one to another when page scrolled

You can use the .each() jQuery method to go through all the <div class="Test"> elements and then use .appendTo() to move each of them and all of their contents to some other element.

I also corrected <div class="product-price">Price Here</li> to this <div class="product-price">Price Here</div>.

Here is the code:

Note: I purposefully gave the bodya height of 2000px so we can test here (run the snippet).

$(document).scroll(function(){  if($(window).width() >= 480)  {     var y = $(this).scrollTop();     var div;       if (y > 600)     {       // for each element with class Test       $('div.Test').each(function()       {         $(this).appendTo('#Top'); // move the element and contents to #top       });           $('#Top').fadeIn();     }      else      {       $('div.Test').each(function()       {         $(this).appendTo('body');    // move to body       });           $('#Top').fadeOut();     }  }});

body{  height:2000px;}
#Top {  display: block;  position: fixed;  top: 0;  left: 0;  width: 100%;  border-bottom: 2px solid #f2f2f2;  border-radius: 0;  background-color: rgb(255, 255, 255);  z-index: 9999;  padding: 15px;}

<!DOCTYPE html><html><head><title>Title of the document</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head>
<body>  <div id="Top"></div>
  <div class="Test">    <h1 class="heading-title">Title Here</h1>    <div class="product-price">Price Here</div>    <div class="cart-container">      <input type="button" id="button-cart" class="button" value="Add to Cart" />    </div></div></body>
</html>

How to Move an Element into Another Element