How to keep jQuery from parsing inserted HTML?

Question

Hello,

Does anyone know how to stop jQuery fromparsing html you insert through before() and after()? Say I have an element:

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

and I want to wrap it in the following way:

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

I use the following 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);
}

This however will not result in the correct wrapping, it will create:

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

Using wrap() won't work either since that gets jQuery even more mixed up when using:

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

How should I solve this?
Thanks in advance!

Answer 1

your markup isn't complete...before and after are to take complete nodes only...

what you are trying to do is wrap your content, which is different.

you want this:

.wrap(html);

http://docs.jquery.com/Manipulation/wrap#html

Answer 2

I'm sorry, but this one should be obvious. In your case, you can't use wrap because it sticks the original node into the deepest node it finds in the wrapping HTML. You don't want that. Instead, read out the HTML from your object and combine it with what you have:

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

    // This line below will do it...
    $(this).html(beforeHTML + $(this).html() + afterHTML);
}

Answer 3

I think you're approaching it wrong. Think about what you actually want to achieve...

You want to WRAP everything with one div. Then insert 1 div before, and 1 div after.

so do .wrap() first, then append before and after-divs relative to the content-div.

if you happen to have the actual HTML as a string (from an XHR or something) then you need to read out the html and concatenate it yourself as Douglas Mayle suggested.

Answer 4

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

produces:

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