问题:

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 ?

回答1:

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')); });

回答2:

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

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

This will cut the div1 html and move it to div2

回答3:

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

回答4:

        <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');

回答5:

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;

回答6:

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 });

回答7:

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/

回答8:

You can use below code:

var text=jQuery('#div2'); jQuery('#div2').remove(); jQuery('#div1').append(text);

转载请标明出处:cut a div and html inside it and paste it into a different div with jquery

文章来源: cut a div and html inside it and paste it into a different div with jquery

标签

jquery

div