在其他范围内创建新的span标记

Question

我有这样的代码，

<div>
   <b>Hello</b>
   <span id=x class=highlight_red>
       how are
       <span id=y class=highlight_blue> you John?</span>
   </span>
</div>

现在例如，使用jquery或javascript，我想在文本上设置一个新的span标签＆＃34;你是＆＃34; （http://jsfiddle.net/kgw57v3e/）

<div>
   <b>Hello</b>
   <span id=x class=highlight_red>
       how 
       <span id=z class=highlight_yellow>are
       <span id=y class=highlight_blue> you</span> John?</span>
   </span>
</div>

问题是在字符串＆＃34; John？＆＃34;之后，＃z将关闭。而不是在＆＃34;你＆＃34;。 有没有办法在javascript或jquery中解决这类问题？ （这是一个例子，如果有可能有一个与其他情境一起使用的解决方案）。

感谢。

Answer 1

$('#y').after("<span id='z'>bla bla</span>");