Обертывание текста с помощью span, используя waitForKeyElements, убивает стиль?

Question

Я использую 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> 

Я хочу изменить Thu 5:30 pm @ NE к Thu 5:30 pm @ < span class="color">NE - [rank]</span> (Обратите внимание, что [ранг] является переменной у меня есть)

Вот что я пытался

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

Но это заставляет элемент потерять это моделирование.

Answer 1

В настоящее время вы берете только текст («H. Miller Pit - TE» и т. Д.) Всего дерева узлов в <div class="Ov-h Mx-a"> и используете его в качестве нового содержимого, отбрасывающего все существующие html-макеты внутри DIV.

Правильный метод, как правило, чтобы изменить содержимое только из соответствующих элементов избежать воссоздание элементов двойников (так что слушатели событий, присоединенные с addEventListener или on продолжать работать над ними) и использовать .html() (так как вы добавляете HTML):

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