如何修改HTML代码调用Ajax将它添加到文档之前？ [英] How can I modify html from an ajax call before adding it into document?

问题描述

我执行Ajax调用抓住从服务器的HTML页面; AJAX调用看起来是这样的：

 函数loadHtml（）{
    $阿贾克斯（{
          键入：GET，
          异步：假的，
          网址：my.html，
          的contentType：text / html的'，
          数据类型：HTML，
          成功：功能（数据）{
              loadedHtml =数据; //该loadedHtml变量是全球
          }
    }）;
}
 

后来，我想稍微修改后，显示这个网站。

---

尝试1

我想这一点，但由此产生的屏幕显示什么都没有（体不包含HTML）。

  VAR为myContent = $（loadedHtml）.find（'＃TEST1）文本。（修改！）;
$（身体）HTML（为myContent）;
 

---

尝试2

我也试过这个，但由此产生的屏幕只显示原始内容 loadedHtml 。

  VAR为myContent = $（loadedHtml）;
。myContent.find（'＃TEST1）文本（修改！）;
$（身体）HTML（为myContent）;
 

---

原始的HTML

下面是 loadedHtml 从 my.html

原始内容

 ＆LT; D​​IV ID =测试1的风格=颜色：白色;＆GT;加工！ ＆LT; / DIV＆GT;
 

---

我是什么做错了吗？

---

更新

1. 这是一个简单的例子，我试图让添加的是我真正需要做的复杂工作之前。因此，使用一个简单的字符串并将其插入到DOM之前对 loadedHtml 变量替换是不是会为我工作。
2. 我已经更新了我的code，显示Ajax调用是同步的。在 loadedHtml 变量不其实的时候，我到这一点我试图修改它包含从服务器上的HTML。

解决方案

您滥用查找功能：

  

由于重新presents了一组DOM元素，的.find（）方法可以让我们通过这些元素在DOM树的后代进行搜索，并构造一个新的jQuery对象从匹配元素jQuery对象。该.find（）和。儿童（）方法是相似的，但后者只移动一个向下的DOM树级别。

它只能搜索后代，你的情况＃test1的是不是一个孩子......

这样的：

  $（'＆LT; D​​IV ID =测试1的风格=颜色：白色;！＆GT;工作＆LT; / DIV＆GT;'）找到（'＃TEST1）
 

不会抢test1的元素，它不是一个后代。

I'm performing an ajax call to grab an HTML page from the server; ajax call looks like this:

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

Later, I'd like to display this html after modifying it somewhat.

---

Attempt 1

I tried this, but the resulting screen shows nothing at all (body contains no html).

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

---

Attempt 2

I also tried this, but the resulting screen just shows the original content of loadedHtml.

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

---

Original Html

Here's the original content of loadedHtml from my.html

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

---

What am I doing wrong?

---

UPDATES

1. This is a simple example I'm trying to get to work before adding the complexity of what I really need to be doing. So, using a simple string replace on the loadedHtml variable before inserting it into the DOM is not something that will work for me.
2. I've updated my code to show the ajax call is synchronous. the loadedHtml variable does in fact contain the html from the server by the time I get to the point I'm trying to modify it.

解决方案

You misuse the find function:

Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

It search only descendants, In your case #test1 isn't a child...

so this:

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

Won't grab the test1 element, it's not a descendant.

这篇关于如何修改HTML代码调用Ajax将它添加到文档之前？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！