jquery - 使用Jquery解析网页的html，修改，然后重新插入网页

Question

我目前正在尝试在网页中的某些词周围添加标签。这个网页可以有许多不同的 ID、类和名称，所以如果我想在“foo”周围放置一个跨度，我执行以下操作很重要:

<p class='foo'>blah blah blah foo blah blah blah </p>

变成

<p class='foo'>blah blah blah <span class='bar'> foo </span> blah blah blah </p>

不是

<p class='<span class='bar'> foo </span>'>blah blah blah <span class='bar'> foo </span> blah blah blah </p>

我正在研究使用以下代码解析网站:

var obj = $(this.innerHTML);  //in my selector which selects the part of the website I want to apply the span to

我可以在 firebug 中浏览此数据结构，但事实证明修改它(或搜索它)更加困难。

如果我查看 obj[1]，innerHTML 属性如下所示:

<h4 id="3423df" class="pzCMD">blah blah foo blah </h4>

我不知道如何修改此元素(如果可能)或向其添加新节点。我可以通过查看 textContent 来提取“文本”

obj[1].textContent = blah blah foo blah

但我不确定如何将此元素的 html 代码更改为

<h4 id="3423df" class="pzCMD">blah blah <span class='bar' foo <span> blah </h4>

感谢您的帮助，对于冗长的解释深表歉意。

Answer 1

jQuery.add()允许您动态附加 dom 元素，但也可以直接放入 Jscript 中:

 var obj = $(this.innerHTML); 
 obj[1].innerHTML = obj[1].innerHTML+'blah hi</span>';
 //<h4 id="3423df" class="pzCMD">blah blah <span class='bar' foo <span> blah blah hi  </span> </h4>