Question

我正在尝试使用类newContent将id为ajax-container的div中的所有内容复制到另一个div中。我试过这个：prepend，append和html删除原始内容，克隆功能不起作用。

$(".newContent").html($("#ajax-container")).html();

  $('.newContent').prepend($('#ajax-container'));

那些正在删除原来的div

克隆方法不是复制页面的所有内容，只复制第一个div。我想复制该div中的所有内容。我在这里发现了一些问题，但没有用。

$('#ajax-container').clone().appendTo('.newContent');

这只会放入parrent div，而不是全部内容

var $comt=$("#ajax-container").children().clone(true,true);
   $(".newContent").html($comt).html();

这根本不起作用

newContent div位于wordpress主题中的page.php内部，在根位置使用下划线，ajax-container位于标题部分。通过ajax加载的ajax-container div的内容。

<section class="viewport" id="content">
        <div class="right">

            <div class="front" id="ajax-container" ></div>
            ...

        </div>


    </section>

这是jquery文件：

$(document).ready(function(){
      $("ul.nav-menu> li a").on('click',function(e){
  e.preventDefault();//stop loading the new link
 //  e.stopPropagation();
   var url = this.href;
   $('ul.nav-menu> li a.current').removeClass('current');
   $(this).addClass('current');
   $("#primary.content-area").remove();//remove old content
   $.ajax({
       url: url,
       type: "GET",
       dataType: "html",
       success: function (res) {
           $("#ajax-container").html($(res).find("#primary.content-area")
               .addClass('done'))
               .fadeIn('slow');
       }
   });

   //var amount =360;
   //$("#ajax-container").clone().insertAfter("header#masthead.site-header");
   //var $comt=$("#ajax-container").children().clone(true,true);
   //$(".newContent").html($("#ajax-container")).html();

  //$('.newContent').prepend($('#ajax-container'));

   //$('#ajax-container').clone().appendTo('.newContent');
  // $(".newContent").html($("#ajax-container").html());
   var getContent = $('#ajax-container').html();
   $('.newContainer').append(getContent);

}）;

我正在使用wordpress，而消息的内容被ajax加起来。我已经在上面发布了jquery文件。

$('div#ajax-container.front.PageLandingFront').clone().appendTo($('div#primary.content-area'));

此行生成副本，但目标div内部没有所有html，只有根div元素。有什么想法吗？

我终于解决了，这就是我做错了：

$.ajax({
        url: url,
        type: "GET",
        dataType: "html",
        success: function (res) {
            $("#ajax-container").html($(res).find("#primary.content-area").addClass('done')).fadeIn('slow');
        },
        complete: function () {
                $('div#ajax-container.front.PageLandingFront').children().clone().appendTo($('div#primary.content-area'));
                $('div#ajax-container.front.PageLandingFront').html("");
        }
    })

似乎我有这个错误，因为ajax函数与我的克隆同时加载所以我必须确保当我想要克隆该div时完成ajax调用。感谢您的支持！可以关闭此主题，因为我的问题已经解决了！

Answer 1

这不是很有效的原因是因为你正在使用类选择器。给包含div一个id，然后尝试。

$("#newContent").append($("#ajax-container").html());

Answer 2

根据jQuery API的规范，clone方法创建给定元素的深层克隆，包括元素本身。如果您需要元素本身，请选择以下三个中的一个：

$('.newContent').append($('#ajax-container').clone());

$('#ajax-container').clone().appendTo('.newContent');

$('#ajax-container').clone().appendTo($('.newContent'));

如果您只想要给定元素中的子元素，则可以使用其中的一个。

$('.newContent').append($('#ajax-container').children().clone());

$('#ajax-container').children().clone().appendTo('.newContent');

$('#ajax-container').children().clone().appendTo($('.newContent'));

Answer 3

而且，这很好用：

$(document).ready(function() {
	var getContent = $('#ajax-container').html();
    $('.newContainer').append(getContent);
})

div {
	border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<body>
   <div id="ajax-container">
   	<p>something goes here</p>
   	<p>and something goes here</p>
   </div>
   <div class="newContainer">
   	<p>this is the new container</p>
   </div>
  </body>

Answer 4

请注意，在代码段中，内容.first未被覆盖，嵌套内容（粉红色的.nested）也已被放弃。另请注意，当您使用.html()或.text()时，它会覆盖目标的内容。单击 COPY 按钮运行。详细信息在代码段内进行了注释。

段

＆＃13;

/* Delegate click event to #btn1...
|  ...collect the children elements of #ajaxContainer
|  deep clone them then append them to .newContent
*/
$('#btn1').on('click', function() {
  $('#ajaxContainer').children().clone(true, true).appendTo('.newContent');
});

＆＃13;

#ajaxContainer,
.newContent {
  background: rgba(0, 0, 0, .8);
  padding: 5px;
  width: 300px;
  height: 125px;
}
#ajaxContainer {
  border: 5px solid red;
}
.newContent {
  border: 5px solid blue;
}
.nested {
  color: pink;
  border: 1px dotted pink;
}
.content {
  border: 2px solid lime;
  width: 125px;
  height: 40px;
  color: lime;
}
.first {
  border: 2px solid yellow;
  width: 50px;
  height: 25px;
  color: yellow;
  display: inline-block;
}
#btn1 {
  float: right;
  border: 3px dashed orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='btn1'>COPY</button>
<section id='ajaxContainer'>
  <span class='content'>CONTENT</span>
  <div class='content'>CONTENT</div>
  <div class='content'>CONTENT
    <small class='nested'>NESTED</small>
  </div>
</section>

<section class='newContent'>
  <div class='first'>FIRST</div>
</section>

＆＃13;

.prepend（）。append（）正在删除原始内容

4 个答案:

段