18

I have a 3rd party script in which i have no control over the html and can only modify basic css . I just wanted to know if its possible to cut a div and all the html inside it and paste it in a different div as soon as the page loads?

suppose we have

  <div id="example-one">
      <ul class="nav">
         <li class="nav-one"><a href="#featured" class="current">Billing Address</a></li>
      </ul>
      <div class="list-wrap">
          hello
      </div>
  </div>

and when the page loads jquery cuts the whole html specifying the div id "example-one" and paste it into a new div name it be "new-div". Is this possible ?

user1001176
  • 1,156
  • 3
  • 15
  • 36

10 Answers10

34

There is no cut & paste in DOM, you can append it(move it) to a different point in DOM:

$(document).ready(function() {
   $('#example-one').appendTo('#new-div');
});

In case that you want to create a div#new-div element and it doesn't exist:

$(document).ready(function() {
   $('<div/>', { id: 'new-div' }).appendTo('#somewhere').append($('#example-one'));
});
Ram
  • 143,282
  • 16
  • 168
  • 197
  • thanks for answering me again to one of my question . actually its a 3rd party script foxycart. i cant keep both the divs. as its carrying information for checkout of a item so duplicate of values in hidden fields would cause failure in checkout . is there no way we can cut and paste that ? – user1001176 Jun 05 '13 at 23:06
19

I was able to find the answer to my question. I tried one jQuery function and it worked like a charm as I wanted. I am pasting the code so that it can be useful to anyone who has the exact problem as mine.

jQuery(document).ready(function() {
    $('#div1').insertAfter('.div2');
});

This will cut the div1 HTML and move it to div2.

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
user1001176
  • 1,156
  • 3
  • 15
  • 36
2

Using jQuery, you can use something like this:

$("#example-one").append("<div id="new-div"></div>"); // Add #new-div to the DOM
$("#new-div").html($("#list-wrap").html()); // Giv #new-div the content of #list-wrap
$("#list-wrap").remove(); // Destroy #list-wrap
Mooseman
  • 18,763
  • 14
  • 70
  • 93
2
        <div id="example-one">
              <ul class="nav">
                 <li class="nav-one"><a href="#featured" class="current">Billing Address</a></li>
              </ul>
              <div class="list-wrap">
                  hello
              </div>
          </div>


        $(document).ready(function() {
           $('#example-one').appendTo('.new-div');
        });

**out put:**
    <div class='new-div'>
     <div id="example-one">
              <ul class="nav">
                 <li class="nav-one"><a href="#featured" class="current">Billing Address</a></li>
              </ul>
              <div class="new-div">
                  hello
              </div>
          </div>
    </div>

OR you can use below Code $('#example-one').clone().appendTo('.new-div');

Krunal Hingu
  • 45
  • 7
1

You can select the element you want to get the contents then appendTo to new container

$("#example-one").children().appendTo("#new-div");

Or if you mean to move the div with the ID you can use 

$("#example-one").appendTo("#new-div");

Both methods will move the elements

To run a script when the page loads you can use jQuery ready

$(function() {
    // code here will run after DOM loads
});
BrunoLM
  • 97,872
  • 84
  • 296
  • 452
1

Although it is tagged jQuery, people might want a vanilla alternative Try out on fiddle: https://jsfiddle.net/VanKusanagi/go06kcre/

In essence the core code is:

function moveDiv(){
  var exampleDiv = document.getElementById("example-one");
  var newDiv = document.getElementById("new-div");
  newDiv.appendChild(exampleDiv);
}

You can load it on DOMCONTENTLOADED (fires earlier than window's load event)

document.addEventListener("DOMContentLoaded", function() {
    moveDiv();
});

Or Window's load event

window.onload = moveDiv;
Abhishek singh
  • 21
  • 3
0

Could you just do something like:

$("#new-div").html($("#example-one"));
$("#example-one").hide;

This will basically take all html from #exmaple-one and put it into #new-div and hide the #example-one div.

Here is a jFiddle for it: http://jsfiddle.net/sf35D/

LukeP
  • 1,505
  • 1
  • 16
  • 25
0

You can use below code:

var text=jQuery('#div2');
jQuery('#div2').remove();
jQuery('#div1').append(text);
Arun Kushwaha
  • 1,136
  • 1
  • 8
  • 8
  • This does not really give anything compared to the other answers. Especially as the question has no `div1` or `div2` – meskobalazs Aug 07 '15 at 12:27
  • This is not a spoon feeding work and It's just an example to show you how to work accordingly, the further work will be done by yourself and this script is already tested. – Arun Kushwaha Oct 24 '15 at 18:25
  • This is better because others are not removing the original div which OP wanted. – Howdy Jul 08 '21 at 19:28
0

Why not try to wrap those contents in parent divs, and then simply "copy\paste" the html content of it ?

Example

<div id="content_1">
 <div class="nav">
  <span>very nice website...</span>
 </div>
</div>
<div id="content_2"></div>

Then, in jquery (since the question asks about jquery, but it could be done un pure js) :

var mash_potatoe = $("#content_1").html(); // Copy content
$("#content_1").html(''); // Erase content
$("#content_2").html(mash_potatoe); // Paste content

The result would be :

<div id="content_1"></div>
<div id="content_2">
<div class="nav">
  <span>very nice website...</span>
 </div>
</div>
MMB
  • 425
  • 3
  • 9
-1
$('#div1').append($('#div2'));

This code cut the div2 from its current place and paste it inside of div1

Odilbek Utamuratov
  • 143
  • 1
  • 8