Javascript 使用WaitForkEyelments以跨距包装文本是否会破坏样式？

我正在使用Greasemonkey和

waitForKeyElements（）

更改网页中的某些文本

下面是单个jNode元素的示例

<div class="Ov-h Mx-a">
    <div>
        <div class="Grid-bind-end">
            <div class="ysf-player-name Nowrap Grid-u Relative Lh-xs Ta-start">
                <a class="Nowrap" href="http://sports.yahoo.com/nfl/players/7206" target="sports">H. Miller</a> <span class="Fz-xxs">Pit - TE</span>
            </div>
        </div>

        <div class="Grid-bind-end">
            <span class="ysf-player-status F-injury Fz-xxs Grid-u Lh-xs"></span>

            <div class="ysf-player-detail Nowrap Grid-u Fz-xxs Lh-xs Ta-start">
                <span class="ysf-game-status"><a class="F-reset" href="http://sports.yahoo.com/nfl/pittsburgh-steelers-new-england-patriots-20150910017/" onclick="pop(this)" target="sports">Thu 5:30 pm @ NE</a></span>
            </div>
        </div>
    </div>
</div>

---

但这会使元素失去其样式。

目前，您只在

中获取整个节点树的文本（“H.Miller Pit-TE”等），并将其用作新内容，丢弃DIV中所有现有的html布局

正确的方法通常是只更改相关元素的内容，以避免重新创建同级元素（这样附加了

addEventListener

或

on

的事件侦听器将继续处理它们），并使用

.html（）

（因为您正在添加html）：

var-link=jNode.find（“.F-reset”）；
html（link.html（）.replace（“NE”，“NE-[rank]”）；

好的，这种文本的包装——在一个节点中——是在用户脚本中使用jQuery的

.html（）

的罕见地方之一。有“更纯粹”的DOM方法，但只要被替换的节点没有子节点或事件处理程序，缺点就很小，

.html（）

通常更清晰、更简单。

jNode.text((jNode.text().replace("NE","<span class='color'>NE - [rank]</span>")))

var link = jNode.find(".F-reset");
link.html(link.html().replace("NE","<span class='color'>NE - [rank]</span>"));