jQuery 将临时 DOM 操作为 HTML 字符串答案

【问题标题】：jQuery to manipulate temporary DOM as HTML stringjQuery 将临时 DOM 操作为 HTML 字符串
【发布时间】：2021-09-08 21:43:49
【问题描述】：

我正在跟进解决方案jQuery - Insert text inside element of a HTML string 这与我的问题非常相似，但我无法使其正常工作。

问题定义：

我从一些外部代码中获取了一些 HTML，并将其存储到一个变量中。 HTML如下：

<div class="A2_B3" id="A2_B3">
    <div class="symptom">Symptom 1</div>
</div>
<div class="A2_B1" id="A2_B1">
    <div class="symptom">Symptom 2</div>
</div>

我将此 HTML 存储到一个名为“tmp_dom_html”的变量中。

我的工作：

(1) 检查 class="A2_B3" 是否有下一个 div 为 class="connected"。如果找到，则在其中添加 myHtml。

(2) 如果 class="A2_B3" 没有下一个 class="connected" 的 div，则在其中附加一个名为 "connected" 的类的 div 和 myHtml。

var myHtml = '<p>Bla Bla Bla</p>';

最后的 HTML 应该是这样的：

<div class="A2_B3" id="A2_B3">
    <div class="symptom">Symptom 1</div>
</div>
<div class="connected"><p>Bla Bla Bla</p></div>
<div class="A2_B1" id="A2_B1">
    <div class="symptom">Symptom 2</div>
</div>

这是我的代码，但似乎没有任何效果。谁能帮我解决这个问题。

<script type="text/javascript">
var tmp_dom_html = '<div class="A2_B3" id="A2_B3"><div class="symptom">Symptom 1</div></div><div class="A2_B1" id="A2_B1"><div class="symptom">Symptom 2</div></div>';

var new_dom_html = $(tmp_dom_html);
var myHtml = '<p>Bla Bla Bla</p>';
//If the div with class="connected" is found, like this <div class='connected'></div> but without anything isnide it
new_dom_html.find(".A2_B3").next(".connected").append(myHtml);

if(!new_dom_html.find(".A2_B3").next().hasClass(".connected")){
    new_dom_html.find(".A2_B3").after("<div class='connected'>"+myHtml+"</div>");
}
alert($(new_dom_html).html());

【问题讨论】：

如果您将外部 div 提供给您的 html，那么它的工作正常。因为.find() 无法找到该元素，所以您需要提供一些父容器才能使其正常工作。
你的意思是，我必须添加另一个容器 div 作为 tmp_dom_html 的包装器。但这会改变整个 html 代码。

标签： html jquery string dom dom-manipulation

【解决方案1】：

使用DOMParser。

const data = new DOMParser().parseFromString(`<div class="A2_B3" id="A2_B3"><div class="symptom">Symptom 1</div></div><div class="A2_B1" id="A2_B1"><div class="symptom">Symptom 2</div></div>`, "text/html");
const selected = $(data.body);
$('.A2_B3', selected).each(function(){
  if(!$(this).next().hasClass('connected')){
    $(this).after('<div class="connected"><p>Bla Bla Bla</p></div>');
  }
})
console.log(selected[0].innerHTML);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：