如何使用jQuery获取指定div的全部HTML并添加到目标元素中

嘿，这事儿很简单，我给你写个清晰的实现示例，分两种常见场景说明——毕竟“添加”可能是替换目标元素内容，也可能是追加到原有内容后面：

核心思路 #

用jQuery的.html()方法获取源容器的全部HTML内容，再根据需求用.html()或.append()把内容放到目标元素里。

完整代码示例 #

<!-- 先准备好HTML结构 -->
<div id="THIS_DIV">
  <h3>这是源容器里的标题</h3>
  <p>还有段落文本，<strong>带格式的内容</strong>也能完整复制</p>
</div>

<div id="ADD_HTML_HERE">
  <!-- 这里是内容要添加的位置 -->
</div>

<!-- 记得先引入jQuery（如果项目里还没引入的话） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 确保DOM加载完成后再执行代码，避免找不到元素的问题
$(function() {
  // 第一步：获取#THIS_DIV里的全部HTML内容
  const sourceContent = $('#THIS_DIV').html();

  // 场景1：替换#ADD_HTML_HERE的全部内容
  $('#ADD_HTML_HERE').html(sourceContent);

  // 场景2：如果不想覆盖目标元素原有内容，而是追加到末尾，就用append
  // $('#ADD_HTML_HERE').append(sourceContent);
});
</script>

关键方法说明 #

• $('#THIS_DIV').html()：这个方法会返回选中元素内部的所有HTML代码，包括嵌套的标签和文本，完全符合你“获取全部HTML内容”的需求。
• $('#ADD_HTML_HERE').html(sourceContent)：把目标元素的内容替换成你获取到的HTML。
• $('#ADD_HTML_HERE').append(sourceContent)：把获取到的HTML追加到目标元素的末尾，保留原有内容。

小提示 #

如果你的脚本是放在<body>标签的最后面（DOM元素都加载完成后），那可以不用$(function(){...})包裹，但加上这个包裹会让代码更健壮，避免因为加载顺序问题导致选择器找不到元素。

内容的提问来源于stack exchange，提问作者Michael Xavier