javascript - Add safe HTML inside unsafe string appended with .text() -

so if have unsafe string:
'<div id='unsafe'></div> unsafe2 <div id='unsafe3'></div>' safely appended (or going appended) inside div container via div.text(str), how can safely , efficiently replace middle part of string - unsafe2 (or few separate parts in bigger string) trusted html (let's inline-block element), displayed html,

i.e final display inside container must this:

                          ___  <div id='unsafe'></div> |___| <div id='unsafe3'></div> 

edit: assuming know how find unsafe2 inside string. question of proper , safe replacement 1 bothers me.

edit2: here's simple fiddle: https://jsfiddle.net/5pa7do7w/ type containing word doggy(hello doggy, i'm here!) , hit enter, assume unsafe string came other user's end. in 'chat' field doggy replaced colored span doggy. easy do, using .html(str), approach if input unsafe string <script> alert example - trigered, whole string appended html. want append hello doggy, i'm here! via .text(str) 'escape' it, butt still able swap doggy colored html now.

edit3: while trying solve - updated fiddle. how must , work: https://jsfiddle.net/5pa7do7w/1/ try enter <div></div> hey doggy <script> window.alert(hello) </script> doggy. afraid possible break out of js scope xss, costantly using unescaped string in code while splitting it, , not sure there vulnerability or not.