在其中剪切一个 div 和 html，然后使用 jquery 将其粘贴到不同的 div 中

cut a div and html inside it and paste it into a different div with jquery

提问by user1001176

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?

我有一个 3rd 方脚本，我无法控制 html 并且只能修改基本的 css 。我只是想知道是否可以在页面加载后立即剪切 div 和其中的所有 html 并将其粘贴到不同的 div 中？

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 ?

当页面加载 jquery 时，会剪切整个 html，指定 div id"example-one"并将其粘贴到一个新的 div 名称中"new-div"。这可能吗 ？

采纳答案by user1001176

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 函数，它的工作原理就像我想要的那样，我正在粘贴代码，以便它对遇到我的确切问题的任何人都有用。

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

This will cut the div1 html and move it to div2

这将剪切 div1 html 并将其移动到 div2

回答by undefined

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

DOM 中没有剪切和粘贴功能，您可以将其附加（移动）到 DOM 中的不同点：

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

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

如果您想创建一个div#new-div元素但它不存在：

$(document).ready(function() {
   $('<div/>', { id: 'new-div' }).appendTo('#somewhere').append($('#example-one'));
});

回答by Krunal Hingu

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

或者你可以使用下面的代码 $('#example-one').clone().appendTo('.new-div');

回答by Abhishek singh

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

虽然它被标记为 jQuery，但人们可能想要一个香草替代品尝试小提琴：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)

您可以在 DOMCONTENTLOADED 上加载它（在窗口的加载事件之前触发）

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

Or Window's load event

或者Window的load事件

window.onload = moveDiv;

回答by Mooseman

Using jQuery, you can use something like this:

使用 jQuery，您可以使用以下内容：

$("#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

回答by BrunoLM

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

您可以选择要获取内容的元素然后appendTo到新容器

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

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

或者，如果您打算使用可以使用的 ID 移动 div

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

Both methods will move the elements

两种方法都会移动元素

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

要在页面加载时运行脚本，您可以使用jQuery ready

$(function() {
    // code here will run after DOM loads
});

回答by LukeP

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.

这基本上会从#exmaple-one 中取出所有 html 并将其放入 #new-div 并隐藏 #example-one div。

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

这是一个 jFiddle：http: //jsfiddle.net/sf35D/

回答by Arun Kushwaha

You can use below code:

您可以使用以下代码：

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