Question

我收到一个HTML字符串以响应ajax请求。它是一个包含大量分层子节点的大型HTML字符串。

我使用

解析它

jQuery.parseHTML();

将其转换为DOM。现在我想更改具有特定ID的子节点的内容，然后重新生成HTML。

问题是，当我使用jQuery方法选择dom元素进行更改时，它返回该特定节点和

jQuery.html()

只需将该节点更改为HTML。

我尝试过以下代码示例

 var parsedHTML = jQuery.parseHTML( 'htmlstring' );
 jQuery(parsedHTML).find('#element-id').text('changed text').html();

或

jQuery(parsedHTML).filter('#element-id').text('changed text').html();

问题是它只返回span＃element-id，当应用html（）时，生成的html只有span文本。

如何生成完整的html并更改特定节点？

Answer 1

不要链（或者如果你这样做，请使用end，但更简单的是，不要使用）。通过链接，你说你只想要链中最后一组元素的HTML：

var elements = jQuery(parsedHTML);
elements.filter('#element-id').text('changed text');
var html = elements.html();

但elements.html()只会为您提供第一个元素的内部 HTML。要再次获取完整的HTML字符串，您需要获取每个元素的外部 HTML并将它们连接在一起：

var html = elements.map(function() {
  return this.outerHTML;
}).get().join("");

请注意，使用filter假设元素位于HTML字符串的顶层。如果是的话，很好，那很好。如果不是，则需要find代替。

filter的示例：

var parsedHTML = jQuery.parseHTML(
  "<span>no change</span>" +
  "<span id='element-id'>change me</span>" +
  "<span>no change</span>"
);
var elements = jQuery(parsedHTML);
elements.filter('#element-id').text('changed text');
console.log(elements.map(function() {
  return this.outerHTML;
}).get().join(""));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

find的示例：

var parsedHTML = jQuery.parseHTML(
  "<span>no change</span>" +
  "<div>the span is in here<span id='element-id'>change me</span></div>" +
  "<span>no change</span>"
);
var elements = jQuery(parsedHTML);
elements.find('#element-id').text('changed text');
console.log(elements.map(function() {
  return this.outerHTML;
}).get().join(""));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在解析的HTML DOM中查找和更改元素

1 个答案: