如何在將ajax調用添加到文檔之前從ajax調用中修改html？

Question

我正在執行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）。

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>

---

我究竟做錯了什么？

---

更新

1. 這是一個簡單的例子，我試圖在添加我真正需要做的事情的復雜性之前開始工作。 因此，在將loadedHtml變量插入DOM之前使用簡單的字符串替換是不適合我的。
2. 我已更新我的代碼以顯示ajax調用是同步的。 實際上，當我到達我試圖修改它的時候， loadedHtml變量確實包含來自服務器的html。

Answer 1

你濫用了find函數：

給定一個表示一組DOM元素的jQuery對象， .find（）方法允許我們在DOM樹中搜索這些元素的后代，並從匹配元素構造一個新的jQuery對象。 .find（）和.children（）方法類似，只是后者只沿DOM樹向下移動一個級別。

它只搜索后代，在你的情況下#test1不是孩子......

所以這：

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

不會抓住test1元素，它不是后代。

Answer 2

好的如果我“讀”了問題+評論權，你的代碼就在成功函數之外。
你們要記住。 ajax是異步的！ 在成功處理程序中移動您的代碼。

“AJAX中的'A'代表異步。”

但是如何在函數的上下文中使用響應？ 考慮這個有缺陷的示例，我們嘗試更新頁面上的一些狀態信息：

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);
}

由於異步編程的性質，上面的代碼無法正常工作。 提供的成功處理程序不會立即調用，而是在將來從服務器收到響應時的某個時間調用。 因此，當我們在$ .ajax調用之后立即使用'status'變量時，其值仍未定義。 下一個片段顯示了我們如何重寫此函數以按照需要運行：

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

jQuery FAQ

Answer 3

假設你已經設法首先打印loadedHtml （並且你的AJAX調用沒有任何問題），試試這個......

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

打印出來...... ;-)