javascript - How to keep jQuery from parsing inserted HTML? - Stack Overflow

admin管理员组

文章数量:1345284

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!

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!

• javascript
• jquery
• html
• dom

Share Follow edited Nov 6, 2008 at 19:44 Pim Jager asked Nov 6, 2008 at 19:36 Pim JagerPim Jager 32.1k1717 gold badges7474 silver badges9999 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

$('#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>

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

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

you want this:

.wrap(html);

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

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.

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 bine 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);
}

本文标签： javascriptHow to keep jQuery from parsing inserted HTMLStack Overflow