jQuery: Append and prepend unclosed HTML to an element
<p>In an application I'm creating, I am allowing the end-users to add a "Text Formatting" prefix and suffix to a jQuery countdown.<br>
The elements for the countdown are fetched with AJAX, and inserted to DOM with jQ.  </p>

<p>An example for these two fields can be:<br>
Prefix: <code>&lt;span style="color:blue"&gt;</code><br>
Suffix: <code>&lt;/span&gt;</code></p>

<p>What I need to do then is wrap all the code needed for the countdown between these two.<br>
But when I try to add them, all jQuery methods I've tried (append &amp; prepend) and PrototypeJS' <code>Element.insert()</code> will close any open tags in the prefix, rendering the suffix useless.  </p>

<p>I even tried the following:  </p>

<pre><code>$( this ).parent().html( data['prefix'] + $( this ).parent().html() + data['suffix'] );
</code></pre>

<p>This resulted in the element being removed from the DOM tree. Also tried to locally store the innerHTML and fiddle with it before pushing it back to <code>.html()</code>.  </p>

<p>And I can not combine those two fields together, and use <code>.wrap()</code> on it, as either of them can be a completely perfect HTML string. </p>

<pre><code>&lt;span class='tag'&gt;This is a tag&lt;/span&gt;
</code></pre>

<p>If I tried to use <code>.wrap()</code> on that, I assume the rest of my code would end up inside that.</p>
