Ajouter une nouvelle classe à la page en utilisant jQuery

Question

J'essaye d'ajouter par programme un DIV avec la classe de error_icon à la page en utilisant jQuery. Ceci est le code HTML:

<div id="error_icon_holder"></div> 

Quand ils sont ajoutés, le balisage devrait ressembler à:

<div id="error_icon_holder"> 
    <div class="error_icon"></div> 
</div> 

J'ai essayé d'utiliser .addClass, mais qui a abouti à:

<div id="error_icon_holder" class="error_icon"></div> 

Et moi aussi essayé .after qui ne fonctionnait pas non plus. Quelqu'un peut-il me dire comment faire cela? Merci.

Answer 1

Vous voulez .append()

$('#error_icon_holder').append('<div class="error_icon"></div>'); 

• http://api.jquery.com/append/

---

Vous pouvez également retourner autour et utiliser .appendTo().

$('<div class="error_icon"></div>').appendTo('#error_icon_holder'); 

• http://api.jquery.com/appendTo/

---

Ou depuis error_icon_holder semble être vide, vous pouvez utiliser .html(). (Cela devrait normalement remplacer tout le contenu existant.)

$('#error_icon_holder').html('<div class="error_icon"></div>'); 

• http://api.jquery.com/html/

Answer 2

Vous pouvez utiliser cela pour que vous avez accès à error_icon div après sa création:

var errorIcon = $('<div/>'); 
errorIcon.addClass('error_icon'); 
$('#error_icon_holder').append(errorIcon); 

Answer 3

Pour développer ce patrick offert, .append() conservera tout contenu existant dans le div error_icon_holder. Si vous souhaitez remplacer entièrement le contenu, utilisez .html(). Si vous ne voulez pas inclure la classe error_icon avec l'instruction de création div interne, vous aurez besoin de deux instructions distinctes, l'une pour créer la div interne dans l'arborescence DOM et l'autre pour ajouter la classe à l'élément nouvellement créé .