如何使用jQuery重新加载div且不生成嵌套div？

问题重现 #

尝试用jQuery重载指定div，初始代码如下：

function reload(param)
{
$("#divId"+param).load(location.href+" #divId"+param);
}

执行后原div内会嵌套一个同id的div；修改为以下代码后，div内容被清空：

$("#divId"+param).load(location.href+" #divId"+param+">*","";

目标div结构：

<div id="divId">
Random number : <?php echo rand(1,10); ?>
</div>

问题原因 #

1. 初始代码问题：load方法会把匹配到的整个div元素插入到目标div中，而非仅插入div内的内容，因此导致同id div嵌套。
2. 修改后代码问题：> *仅匹配目标div的子元素节点，但你的div内只有文本节点（包括PHP生成的随机数文本），没有子元素，因此没有匹配到任何内容，最终div被清空。

解决方案 #

方案1：利用load的回调函数提取内容 #

通过回调函数获取加载到的HTML，提取目标div的内部内容再替换原div：

function reload(param) {
  var targetSelector = "#divId" + param;
  $(targetSelector).load(location.href + " " + targetSelector, function(response) {
    $(this).html($(response).find(targetSelector).html());
  });
}

方案2：改用$.get请求手动提取内容 #

直接发起GET请求获取页面，再筛选目标div的内容进行替换：

function reload(param) {
  var targetId = "divId" + param;
  $.get(location.href, function(pageData) {
    var newContent = $(pageData).find("#" + targetId).html();
    $("#" + targetId).html(newContent);
  });
}

方案3：调整服务器返回内容（可选） #

如果可以修改后端逻辑，可单独提供返回div内容的接口，避免加载整个页面再筛选：

// 假设后端有接口返回指定div的内容
function reload(param) {
  $("#divId"+param).load("/get-div-content.php?id=" + param);
}

内容的提问来源于stack exchange，提问作者Aude Yence