Question

我需要将div的html附加到目标div。可以用jQuery完成吗？

我尝试了一些jQuery。但它没有回应。

$(".categories_box").clone().end().appendTo(".target-div");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories_box">
  <ul>
    <li><a href="JavaScript:void(0)">Technology <span>37</span></a></li>
    <li><a href="JavaScript:void(0)">Lifestyle <span>04</span></a></li>
    <li><a href="JavaScript:void(0)">Service <span>29</span></a></li>
    <li><a href="JavaScript:void(0)">Food <span>15</span></a></li>
    <li><a href="JavaScript:void(0)">Architecture <span>09</span></a></li>
    <li><a href="JavaScript:void(0)">Adventure <span>44</span></a></li>
  </ul>
</div>

<div class="target-div"></div>

我试图将整个"<ul>"附加到“ target-div”。但是它还没有回应。

Answer 1

您可以像这样使用.html() from jquery：

$(".target-div").html($(".categories_box").html());

Answer 2

使用$(".categories_box").clone().appendTo(".target-div"); .end()用于

结束当前链中的最新过滤操作，然后   将匹配的元素集恢复到之前的状态。

大多数jQuery的DOM遍历方法都对jQuery对象进行操作   实例并生成一个新的，匹配一组不同的DOM   元素。发生这种情况时，就好像新的元素集是   推入保持在对象内部的堆栈上。每   连续过滤方法将新元素集压入堆栈。   如果需要较旧的元素集，则可以使用end（）将集合弹出回来   离开堆栈。

所以您真正需要的是附加克隆的元素。

*更新*

仅附加子级：

$(".categories_box").children().clone().appendTo(".target-div");

Answer 3

您可以尝试一下。

$(".target-div").html($(".categories_box").html());

唯一需要更改js代码的地方。

Answer 4

//$(".categories_box").clone().end().appendTo(".target-div");
$(".target-div").append($(".categories_box").clone().find('ul'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories_box">
   <ul>
       <li><a href="JavaScript:void(0)">Technology <span>37</span></a></li>
       <li><a href="JavaScript:void(0)">Lifestyle <span>04</span></a></li>
       <li><a href="JavaScript:void(0)">Service <span>29</span></a></li>
       <li><a href="JavaScript:void(0)">Food <span>15</span></a></li>
       <li><a href="JavaScript:void(0)">Architecture <span>09</span></a></li>
       <li><a href="JavaScript:void(0)">Adventure <span>44</span></a></li>
    </ul>
</div>
        
<div class="target-div"></div>

如何将div的inner-html附加到目标div？

4 个答案: