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

Question

我在跟进这里的解决方案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" 没有下一个 div with class="connected", 附加一个 div class 将 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());

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

jQuery to manipulate temporary DOM as HTML string

html

string

jquery

dom

dom-manipulation