17

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

假设我们有

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

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

4

10 回答 10

32

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

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

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

$(document).ready(function() {
   $('<div/>', { id: 'new-div' }).appendTo('#somewhere').append($('#example-one'));
});
于 2013-06-05T22:56:37.320 回答
18

我能够找到我的问题的答案。我尝试了一个 jQuery 函数，它就像我想要的那样工作。我正在粘贴代码，以便它对与我有确切问题的任何人有用。

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

这将剪切div1HTML 并将其移动到div2.

于 2013-06-05T23:22:14.043 回答
2

使用 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
于 2013-06-05T22:56:50.427 回答
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>

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

于 2015-10-23T12:46:13.727 回答
1

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

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

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

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

两种方法都会移动元素

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

$(function() {
    // code here will run after DOM loads
});
于 2013-06-05T23:01:15.957 回答
1

虽然它被标记为 jQuery，但人们可能想要一个香草替代品试试小提琴： https ://jsfiddle.net/VanKusanagi/go06kcre/

本质上，核心代码是：

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

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

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

或者 Window 的加载事件

window.onload = moveDiv;
于 2018-03-17T14:22:55.413 回答
0

你能不能做这样的事情：

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

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

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

于 2013-06-05T23:03:53.287 回答
0

为什么不尝试将这些内容包装在父 div 中，然后简单地“复制\粘贴”它的 html 内容？

例子

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

然后，在 jquery 中（因为问题询问 jquery，但它可以在纯 js 中完成）：

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

结果将是：

<div id="content_1"></div>
<div id="content_2">
<div class="nav">
  <span>very nice website...</span>
 </div>
</div>
于 2021-09-24T20:39:16.617 回答
0

您可以使用以下代码：

var text=jQuery('#div2');
jQuery('#div2').remove();
jQuery('#div1').append(text);
于 2015-08-07T11:07:10.637 回答
-1 
$('#div1').append($('#div2'));

此代码从当前位置剪切div2并将其粘贴到div1内

于 2021-03-26T04:57:17.923 回答