如何防止jQuery解析插入的HTML?

有人知道如何阻止jQuery解析通过before()和after()插入的html吗?假设我有一个元素:

<div id='contentdiv'>bla content bla</div>

<div id='wrapperDiv'>
    <div id='beforeDiv'></div>
    <div id='contentDiv'>bla content bla</div>
    <div id='afterDiv'></div>
</div>

我使用以下jQuery/Javascript

$('#contentDiv').each( function() {
    var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
    var afterHTML = "<div id='afterDiv'></div></div>";  
    $(this).before(beforeHTML);
    $(this).after(afterHTML);
}

但是,这不会导致正确的包装,而是会产生:

<div id='wrapperDiv'>
    <div id='beforeDiv'></div>
</div>
    <div id='contentDiv'>bla content bla</div>
    <div id='afterDiv'></div>

使用wrap()也不起作用,因为在使用以下命令时,这会使jQuery更加混乱:

$(this).wrap("<div id='wrapperDiv'><div id='beforeDiv'></div><div id='afterDiv'></div></div>");

我应该如何解决这个问题?
提前谢谢!