如何将一个 div 的 innerHTML 追加到目标 div 中？

Question

我需要将一个

标签中的HTML内容追加到另一个目标

标签中。能否使用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"中，但它还没有响应。

- Kevin

---

这将把整个 div 追加到目标 div。 - Kevin

Answer 1

您可以像这样使用jQuery中的.html()方法：

您可以使用.html()方法来完成此操作：

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

- reynoldmorel

Answer 2

使用$(".categories_box").clone().appendTo(".target-div");将克隆的元素添加到目标div中。

.end()用于结束当前链中最近的过滤操作，并将匹配的元素集返回到其先前的状态。

jQuery的大多数DOM遍历方法都在一个jQuery对象实例上操作并产生一个新的jQuery对象实例，匹配不同的DOM元素集。当这种情况发生时，就好像新的元素集被推到了对象内部维护的堆栈上。每个连续的过滤方法都会将一个新的元素集推到堆栈上。如果我们需要一个旧的元素集，可以使用end()将集合弹回堆栈。

所以你真正需要做的是将克隆的元素附加到目标元素中。

* 更新 *

仅附加子元素：

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

- vladwoguer

---

这个代码可以工作，但是它会复制整个 div 到目标 div 中.. 我需要复制 div 的 innerHTML。 - Kevin

Answer 3

你可以试试这个。

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

你唯一需要改变的是你的js代码。

- Alok Mali

---

它正在工作。但我已经标记了一个答案。谢谢你的时间。 - Kevin

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>

- Sujal Patel

---

{ "message": "未捕获的类型错误：""不是函数", "filename": "https://stacksnippets.net/js", "lineno": 27, "colno": 11 } - Kevin