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

Question

我收到 HTML 字符串以响应 ajax 请求。它是一个很大的 HTML 字符串，有很多分层子节点。

我用

解析它

jQuery.parseHTML();

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

问题是每当我使用 jQuery 方法对 select 一个 dom 元素进行更改时，returns 那个特定节点和

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

问题是它只有 returns span#element-id，当应用 html() 时，生成的 html 只有跨度文本。

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

Answer 1

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

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

但是elements.html()只会给你第一个元素的innerHTML。要再次获取完整的 HTML 字符串，您需要获取每个元素的 outer 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 中查找并更改元素

Find And Change Element In a Parsed HTML DOM

html

javascript

jquery

dom

dom-node