Einfügen von Inhalt Vor und Nach einem Element Ohne Autoclosing tags

Sagen, ich habe das folgende:

<div id="content">content</div>

Und ich möchte einfügen, ein paar Sachen, bevor er ** (beachten Sie die ungeschlossene div)**:

$("#content").before("<div>pre-pre-content</div><div>pre-content ");

Und einige dann etwas mehr nach ** (beachten Sie, ich bin jetzt schließen die div)**:

$("#content").after(" post-content</div><div>post-post-content</div>");

Meine gewünschte Ausgabe:

<div>pre-pre content</div>
<div>
    pre-content <div id="content">content</div> post-content
</div>
<div>post-post content</div>

Statt, was ich bekomme, ist:

<div>pre-pre content</div>
<div>pre-content</div>
<div id="content">content</div>
<div>post-content</div>
<div>post-post content</div>

Da jQuery automatisch "korrigieren" nicht geschlossene tags.

fiddle

Gibt es eine Möglichkeit zu nutzen .wrap (), um verschiedene Inhalte vor und nach einem element, ohne automatisch schließenden tags?

Hinweis, ich nicht Folgendes tun, weil der eine nicht verbundene Einschränkung:

$("#content").html("<div>Content before " + $("#content).html() + " Content after</div>")