javascript - 在将Ajax调用中的html添加到文档之前，如何修改它？

我正在执行ajax调用以从服务器获取HTML页面。 ajax调用看起来像这样:

function loadHtml() {
    $.ajax({
          type          :  'GET',
          async         :  false,
          url           :  'my.html',
          contentType   :  'text/html',
          dataType      :  'html',
          success       :  function(data) {
              loadedHtml = data; // the loadedHtml variable is global
          }
    });
}

稍后，我想在对其进行一些修改后显示此html。

尝试1

我试过了，但是结果屏幕上什么都没有显示(body不包含html)。

var myContent = $(loadedHtml).find('#test1').text("Modified!");
$('body').html(myContent);

尝试2

我也尝试过此方法，但结果屏幕仅显示loadedHtml的原始内容。

var myContent = $(loadedHtml);
myContent.find('#test1').text("Modified!");
$('body').html(myContent);

原始HTML

这是loadedHtml中my.html的原始内容

<div id="test1" style="color: white;"> Working! </div>

我究竟做错了什么？

更新

这是一个简单的示例，在增加我真正需要做的复杂性之前，我正尝试着开始工作。因此，在将loadedHtml变量插入DOM之前使用简单的字符串替换对我来说不起作用。

我已经更新了代码以显示ajax调用是同步的。实际上，到我要修改它时，loadedHtml变量确实包含服务器中的html。

最佳答案

您滥用了find函数:



它仅搜索后代，如果您不是#test1的 child ，...

所以这:

$('<div id="test1" style="color: white;"> Working! </div>').find('#test1')

不会获取test1元素，它不是后代。