JQuery: Comment extraire un élément et insérer du texte/élément avant l'élément extrait?

Question

Hallo,

J'apprécierais votre conseil. Compte tenu de l'extrait suivant:

<div id="parent"><div id="child">ChildText<span id="subchildtext"><b>SubChildText</b></span></div></div> 

Je veux:

1. Extrait de la durée d'élément
   ==>var span = $("#child").find("span");

2. Prepend du texte ("toto") et un nouveau HTML élément ("<b> foorbarbold </b>)
   ==>span.insertBefore("foobar<b>foobarbold</b>")

3. Insérer cette nouvelle élément "dans" le parent (ID = Elément MÈRE)
   de ==>$("#parent").html(span);

Le résultat devrait être: <div id="parent">foobar<b>foobarbold</b><span id="subchildtext"><b>SubChildText</b></span></div>

Mais cela ne fonctionne pas. Je ne suis pas en mesure d'insérer le nouveau contenu à l'élément extrait. Comment pourrais-je accomplir cela?

Merci beaucoup! Tim

Answer 1

Essayez ceci:

$('#parent').html($('#subchildtext')).prepend('foobar<b>foodbarbold</b>');

Answer 2

Je ne sais pas jQuery, mais voici comment vous le faites avec javascript

var span = document.getElementById("subchildtext"); 
var newBold = document.createElement("b"); 
newBold.appendChild(document.createTextNode("foobarbold")); 
span.insertBefore(newBold, span.firstChild); 
span.insertBefore(document.createTextNode("foobar"), span.firstChild) 

Answer 3

Pour définir le code html du parent, essayez ceci:

$("#parent").html(span.html()); 

Mais vous pouvez vous trouvez que vous devez retirer l'original, auquel cas vous pourriez avoir besoin.

span.remove(); 

Cependant, ce qui suit peut travailler pour vous dans une ligne (je ne l'ai pas testé, mais son sur les lignes droite)

span.appendTo("#parent"); 

Ou si vous le voulez au début

span.preprendTo("#parent"); 

Quelques liens pour vous aussi:

http://docs.jquery.com/Manipulation/prependTo

http://docs.jquery.com/Manipulation/remove

Hope this helps