web-dev-qa-db-fra.com

Comment créer un nœud DOM en tant qu'objet?

Je voudrais créer un nœud DOM, définir l'attribut 'id' puis l'ajouter à 'body'. Ce qui suit ne semble pas fonctionner car jQuery ne voit pas mon modèle comme un objet:

var template = "<li><div class='bar'>bla</div></li>";
template.find('li').attr('id','1234');
$(body).append(template);

Comment puis-je dire à jQuery de traiter cela comme un objet afin que find () fonctionne dessus?

jquerydom
50
bart

Je le mettrais d'abord dans le DOM. Je ne sais pas pourquoi mon premier exemple a échoué. C'est vraiment bizarre.

var e = $("<ul><li><div class='bar'>bla</div></li></ul>");
$('li', e).attr('id','a1234');  // set the attribute 
$('body').append(e); // put it into the DOM

Mettre e (les éléments de retour) donne jQuery context sous lequel appliquer le sélecteur CSS. Cela l'empêche d'appliquer l'ID à d'autres éléments de l'arborescence DOM.

Le problème semble être que vous n'utilisez pas l'UL. Si vous mettez un li nu dans l'arborescence DOM, vous allez avoir des problèmes. Je pensais qu'il pourrait gérer/contourner cela, mais il ne le peut pas.

Vous ne pouvez pas mettre des LI nus dans votre arborescence DOM pour votre "vraie" implémentation, mais les UL sont nécessaires pour que cela fonctionne. Soupir.

Exemple: http://jsbin.com/iceqo

Au fait, vous pourriez également être intéressé par microtemplating .

66
cgp

Essaye ça:

var div = $('<div></div>').addClass('bar').text('bla');
var li = $('<li></li>').attr('id', '1234');
li.append(div);

$('body').append(li);

De toute évidence, il n'est pas logique d'ajouter directement un li au corps. Fondamentalement, l'astuce consiste à construire l'arborescence des éléments DOM avec $ ('votre html ici'). Je suggère d'utiliser des modificateurs CSS (.text (), .addClass () etc.) au lieu de faire du jquery parser du HTML brut, il sera beaucoup plus facile de changer les choses plus tard.

25
Tamas Czinege
var template = $( "<li>", { id: "1234", html:
  $( "<div>", { class: "bar", text: "bla" } )
});
$('body').append(template);

Et ça?

15
irio

Transformez d'abord votre modèle en objet jQuery:

 var template = $("<li><div class='bar'>bla</div></li>");

Définissez ensuite les attributs et ajoutez-les au DOM.

 template.find('li').attr('id','1234');
 $(document.body).append(template);

Notez que cela n'a cependant aucun sens d'ajouter un li directement au DOM car li doit toujours être un enfant de ul ou ol. Il est également préférable de ne pas faire jQuery analyser HTML brut. Au lieu de cela, créez un li, définissez ses attributs. Créez un div et définissez ses attributs. Insérez le div dans le li, puis ajoutez le li au DOM.

3
Pim Jager

Et voici la doublure:

$("<li><div class='bar'>bla</div></li>").find("li").attr("id","1234").end().appendTo("body")

Mais je me demande pourquoi vous souhaitez ajouter l'attribut "id" à un stade ultérieur plutôt que de l'injecter directement dans le modèle.

3
gizmo

Il y a trois raisons pour lesquelles votre exemple échoue.

  1. La variable 'template' d'origine n'est pas un objet jQuery/DOM et ne peut pas être analysée, c'est une chaîne. Faites-en un objet jQuery en l'enveloppant dans $ (), tel que: template = $ (template)

  2. Une fois que la variable "modèle" est un objet jQuery, vous devez vous rendre compte que <li> est l'objet racine. Par conséquent, vous ne pouvez pas rechercher le nœud racine LI et obtenir des résultats. Appliquez simplement l'ID à l'objet jQuery.

  3. Lorsque vous attribuez un ID à un élément HTML, il ne peut pas commencer par un caractère numérique avec une version HTML antérieure à HTML5. Il doit commencer par un caractère alphabétique. Avec HTML5, il peut s'agir de n'importe quel caractère non blanc. Pour plus de détails, reportez-vous à: Quelles sont les valeurs valides pour l'attribut id en HTML?

PS: Un dernier problème avec l'exemple de code est qu'un LI ne peut pas être appliqué au BODY. Selon les exigences HTML, il doit toujours être contenu dans une liste, c'est-à-dire UL ou OL.

2
JoeFlash