Quelle est la Différence entre .html() et .html(function(){}) ?

Version imprimable

01/12/2015, 21h35
Toufik83

Quelle est la Différence entre .html() et .html(function(){}) ?

bonjour,

j'ai remarqué qu'il y a une différence entre

Code:

$("#Conteneur").html($("#LeContenu").html())

et

Code:

$("#Conteneur").html($("#LeContenu").html(function(){}))

Avec .html() seulement, le Css approprié à l'élément #LeContenu n'est pas appliqué, par-contre si j'utilise .html(function(){}) le Css est bien appliqué.

pouvez vous m'expliquer qu'elle est le rôle de la function(){} à l'intérieur de html() ? par-ce que si je l'enlève le Css ne sera pas appliqué.

$("#Conteneur").html( $("#LeContenu").html( function(){ }) ) fonctionne comme un append() en déplaçant un élément du DOM.

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
p {
    margin: 8px;
    font-size: 20px;
    color: blue;
    cursor: pointer;
  }
b {
  text-decoration: underline;
}
button {
  cursor: pointer;
}
#text {
  color: red;
}
#tag {
  color: green;
}
button[name="nada"] {
  color: yellow;
}

Code:

1
2
3
4
5
6
7
8
9
<p>
  <b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
  to a <span id="text">text</span> node.
</p>
<p>
  This <button name="nada">button</button> does nothing.
</p>

Code:

1
2
3
4
5
6
7
8
$( "#tag" ).on( "click", function() {
 
  // Function( Integer index, htmlString oldhtml ) => htmlString
  // fonctionne comme un append() en déplaçant un déplaçant un élément du DOM
  // le contenu du paramètre oldHtml est faux
 
  $( this ).html( $( "#text" ).html( function( i, oldHtml ){ console.log( i, oldHtml ); return '<b>Hello</b>'; } ) );
});

01/12/2015, 23h51
Toufik83

parfait danielhagnoul,

merci beaucoup pour l'explication, je viens de retenir 2 astuces que je ne connaissais pas avant :

1-possibilité d'utiliser l'attribut "name" d'un élément bouton dans le Css.
2-possibilité d'utiliser des paramètres dans la fonction(i,oldHtml).

je te remercie.