Comment définir l'attribut de données avec jQuery sur l'élément qui n'est pas encore dans DOM? Javascript Girl

Comment puis-je définir l'attribut data avec jQuery sur un élément qui n'est pas encore dans le DOM?

Code:

var panelHeading = $('<div/>', {class:'panel-heading', href:'#'+username+'PanelContent'}); panelHeading.data('toggle', 'collapse').data('target',"#"+username+"PanelContent");

Les attributs de données n'apparaissent pas lorsque je l'ajoute au document. Les autres attributs apparaissent.

Vous pouvez ajouter des attributs de données lors de la création de l'élément

 var panelHeading = $('<div />', { 'class' : 'panel-heading', href : '#'+username+'PanelContent', 'data-toggle' : 'collapse', 'data-target' : '#'+username+'PanelContent' });

L'utilisation de data() stocke les données en interne dans jQuery, elle ne crée pas d'attributs HTML, donc ça fonctionne assez mal avec des attributs pour des choses comme Bootstrap

La méthode de data() de jQuery ne définit pas les attributs de data- HTML5, elle stocke effectivement des données de haut niveau dans l'élément DOM. Vous pouvez stocker des objets et des fonctions complexes à l'aide de data() que vous ne pouvez pas utiliser les attributs.

Si vous devez vraiment définir un attribut, utilisez attr('data-toggle','collapse') et similaires. Mais comme mentionné dans un commentaire précédent, pourquoi ne pas simplement le définir dans la déclaration initiale?

Vous pouvez utiliser:

 var panelHeading = $('<div data-target="' + '#' + username + 'PanelContent' + '"/>');