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 我试过了，但结果屏幕上什么也没有显示（正文中没有html）

---

尝试2 我也试过了，但结果屏幕只显示了

loadedHtml

的原始内容

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

---

原始Html 以下是

my.html

loadedHtml的原始内容

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

工作！

---

我做错了什么

---

更新

这是一个简单的例子，在增加我真正需要做的事情的复杂性之前，我正试图开始工作。因此，在将

loadedHtml

变量插入DOM之前，对其使用简单的字符串替换对我来说并不合适

我已经更新了代码，以显示ajax调用是同步的。实际上，当我到达试图修改它的点时，

loadedHtml

变量确实包含来自服务器的html

---

假设您首先已经设法打印

loadedHtml

（并且您的AJAX调用没有问题），请尝试以下操作

loadedHtml.replace("test1","modified");

然后打印出来…；-）

好的。如果我正确地“阅读”了问题和注释，则您的代码超出了成功功能。
你们必须记住<代码>ajax是异步的！将代码移到成功处理程序中

“AJAX中的‘A’代表异步。”

但是如何在函数的上下文中使用响应呢？考虑这个有缺陷的例子，我们试图更新页面上的一些状态信息：

由于异步编程的性质，上面的代码不能按预期工作。提供的成功处理程序不会立即调用，而是在将来从服务器接收响应时调用。因此，当我们在$.ajax调用之后立即使用'status'变量时，其值仍然未定义。下一个代码片段显示了如何重写此函数以使其按需运行：

---

jQuery

您误用了

查找功能：

给定一个表示一组DOM元素的jQuery对象，find（）方法允许我们在DOM树中搜索这些元素的后代，并从匹配的元素构造一个新的jQuery对象。.find（）和.children（）方法类似，只是后者只沿DOM树向下移动一层

它只搜索后代，在您的情况下，
test1
不是孩子…

因此：

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

$（'Working！'）。查找（'test1'）

不会获取test1元素，它不是后代。
@gdoron loadedHtml是一个变量，用于存储ajax调用的响应。因此，在ajax调用之后，它包含字符串“Working！”。你把它插入DOM了吗？我猜不是…@gdoron当我调用$（'body'）.html（myContent）时，它会被插入DOM中。我试图在将其插入DOM之前对其进行修改。别忘了AJAX调用是异步的。修改响应的代码在哪里？如果它不在success函数中，您如何保证AJAX调用在您尝试修改响应之前已经完成？@andyb-为了简单起见，我省略了一些细节，但我确实在尝试修改之前验证AJAX调用已经完成，并且加载的html实际上包含预期的html。我将尝试改进我的问题。在将原始字符串添加到文档之前，在原始字符串上使用.replace（）可以正常工作。问题是我需要做更复杂的更改。在引入更多复杂性之前，我只是想让这个简单的例子起作用。我将更新我的问题，使其更加具体。@csturtz您是否已尝试过
警报（myContent）
第一次？为了查看（想当然地认为Ajax调用和处理结果的方式都没有问题），以下两种状态中的哪一种是错误的……如果代码在
success
函数之外。。。那我想你把我们都弄到手了。。。出人意料地。。。（我认为这是理所当然的）我更新了我的问题。ajax调用不是异步的。。。我也注意到了同样的问题。@gdoron：看看他在我回答下面的评论。如果他真的尝试了“.replace”并且成功了，他一定是在正确的轨道上。。。哈？@csturtz。这是一种猜谜游戏。请显示所有代码！好吧，我承认：jQuery绝对不是我喜欢的。所以，我想他可以把它（我的意思是最初的
test1
块）放在另一个
div
或其他什么东西里，嗯？@Kameleon博士。您可以这样做：
$（loadedHtml）.wrap（''）.parent（）.find（'#test1'）
，然后您将得到
$（loadedHtml）
，所以。。。为什么？：）我最后只是修改了
my.html
文件，以便将当前内容包装在一个额外的div中。这允许现有的javascript生成我最初想要的内容。@csturtz。我的建议是：阅读您使用的每个jQuery函数的所有API文档。不要使用那些你认为你知道他们在做什么的函数，知道他们在做什么！祝你好运
function updateStatus() {
     var status;
     $.ajax({
         url: 'getStatus.php',
         success: function(response) {
             status = response;
         }
     });
     // update status element?  this will not work as expected
     $('#status').html(status);
}

function updateStatus() {
     $.ajax({
         url: 'getStatus.php',
         success: function(response) {
             // update status element
             $('#status').html(response);
         }
     });
}

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