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

Question

有谁知道如何停止jQuery frompars的html你通过before()和after()插入？说我有一个元素:

<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>");

我该怎么解决这个问题？
提前致谢!

Answer 1

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

生产:

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