Manipulation du contenu HTML avec jQuery 1-3

• Sans Argument

• Si cette méthode est appelée sans argument, elle renvoie le contenu HTML de l’élément sélectionné.
• Exemple
<p id="titre">J'aime mon site de formation <em>apcpedagogie.com</em>.</p>
$("#titre");//Sélectionne la balise mais ne fait rien.
alert($("#titre").html());//Affiche le contenu "J'aime mon site de formation apcpedagogie.com "

• Avec Argument

• Permet de modifier le contenu de l’objet si on l’appelle avec comme premier argument une chaîne de caractères qui joue le rôle du contenu.
• Exemple
<p id="titre">J'aime mon site de formation <em>apcpedagogie.com</em>.</p>
alert($("#titre").html('Je préfère lire à distance '));//Remplace le contenu "J'aime mon site de formation apcpedagogie.com " par "Je préfère lire à distance "

• text()

• Si cette méthode est appelée sans argument, elle renvoie le contenu textuel de l’élément sélectionné.
• Lorsque cette méthode est utilisée pour renvoyer du contenu, elle renvoie le contenu textuel de tous les éléments correspondants (le balisage HTML sera supprimé).
• Exemple
• Soit le code HTML suivant:

<p id="titre">J'aime mon site de formation <em>apcpedagogie.com</em>.</p>
alert($("#titre").text());//Affiche le contenu "J'aime mon site de formation apcpedagogie.com "

• text(text)

• Lorsque cette méthode est utilisée pour définir le contenu, elle écrase le contenu de TOUS les éléments correspondants.
• Exemple
• Soit le code HTML suivant:

<p id="titre">J'aime mon site de formation <em>apcpedagogie.com</em>.</p>
alert($("#titre").text('Je préfère lire à distance '));//Remplace le contenu "J'aime mon site de formation apcpedagogie.com " par "Je préfère lire à distance "

<p id="titre">
<span class="idDiv">
J'aime mon site de formation <em>apcpedagogie.com</em>
</span>
</p>

<script>
$(function(){
alert('Résultat avec text()' + $('#titre').text());
alert('Résultat avec html()' +$('#titre').html());
});
</script>


• Où:
• sélecteur: Est un paramètre obligatoire. Spécifie les éléments à remplacer
• contenu: Est un paramètre obligatoire. Spécifie le nouveau contenu.

Les méthodes replaceWith() et replaceAll() font la même chose. La différence est dans la syntaxe : le placement du contenu et sélecteur et que replaceWith() peut remplacer le contenu à l’aide d’une fonction.

$('div').replaceWith('<span>Salut!</span>'); //transformera <div>Bonjour..</div> en <span>Salut!</span>

• Cette méthode accepte deux paramètres tels que mentionnés ci-dessus et décrits ci-dessous:
• contenu: c’est le paramètre requis qui est utilisé pour spécifier le contenu à insérer.
• sélecteur: C’est un paramètre obligatoire qui spécifie les éléments à remplacer.

  <script>
  $(document).ready(function(){
    $("#liste1").on("click", "", modifierHTML);
    $("#liste2").on("click", "", lireTEXT);
    $("#liste3").on("click", "", diffHtmlText);
    $("#titre1").on("click", "", modifierUL);
    $("#titre2").on("click", "", modifierTitre);
  });
  function modifierHTML(){
    var nbli=$("#liste1 li").length+1;
    $("#liste1").html($("<li>J'aime mon site de formation <em>apcpedagogie.com</em> : "+nbli+"</li>"));
  }
function lireTEXT(){
    alert($("#liste2").text());
  }
function diffHtmlText(){
alert('Résultat avec text()' + $('#liste3').text() 
+ 'Résultat avec html()' +$('#liste3').html());
  }
  function modifierUL(){
    $('ul').each(function(){
        var element=$(this);
        element.replaceWith('<ol>'+element.html()+'</ol>');
    });
  }
  function modifierTitre(){
    $('h3').each(function(){
        var element=$(this);
        element.replaceWith('<h6>'+element.html()+'</h6>');
    });
  }
</script>