Comment empêcher jQuery d'analyser le code HTML inséré?

Question

Est-ce que quelqu'un sait comment arrêter jQuery d'ignorer html que vous insérez avant() et après()? Dire que j'ai un élément:

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

et je veux l'envelopper de la manière suivante:

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

J'utilise les éléments suivants 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); 
} 

Cependant, cela ne se traduira pas dans l'emballage correct, il va créer:

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

wrap() À l'aide ne fonctionne pas non plus car cela devient jQuery encore plus mélangé lors de l'utilisation:

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

Comment dois-je résoudre ce problème?
Merci d'avance!

Answer 1

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

produit:

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

Answer 2

votre balisage est pas complet ... avant et après doivent prendre des nœuds complets que ...

ce que vous essayez de faire est wrap votre contenu, ce qui est différent.

vous voulez ceci:

.wrap (html);

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

Answer 3

Je suis désolé, mais celui-ci devrait être évident. Dans votre cas, vous ne pouvez pas utiliser l'enveloppe, car elle place le noeud d'origine dans le noeud le plus profond qu'il trouve dans le code HTML d'encapsulation. Tu ne veux pas ça. Au lieu de cela, lire le code HTML de votre objet et le combiner avec ce que vous avez:

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

Je pense que vous vous approchez mal. Pensez à ce que vous voulez vraiment réaliser ...

Vous voulez tout ranger avec un div. Insérez ensuite 1 div avant et 1 div après.

faites tout d'abord .wrap(), puis ajoutez avant et après-divs par rapport à div-content. Si vous avez le code HTML réel sous la forme d'une chaîne (à partir d'un XHR ou de quelque chose), vous devez lire le code HTML et le concaténer vous-même, comme suggéré par Douglas Mayle.