Comment créer un noeud DOM en tant qu'objet?

Question

Je voudrais créer un noeud DOM, définir l'attribut 'id' et l'ajouter ensuite à 'body'. Ce qui suit semble ne pas fonctionner parce que 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 pour traiter cela comme un objet afin de trouver() fonctionne sur elle?

Answer 1

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 rendements des éléments) 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'arbre DOM, vous allez avoir des problèmes. Je pensais qu'il pourrait gérer/contourner cela, mais il ne 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

Par ailleurs, vous pouvez également être intéressé par microtemplating.

Answer 2

Essayez ceci:

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'a pas de sens pour ajouter un li au corps directement. Fondamentalement, l'astuce consiste à construire l'arbre DOM elementr avec $ ('votre html ici'). Je suggère d'utiliser des modificateurs CSS (.text(), .addClass() etc) par opposition à faire jquery parse HTML brut, il sera beaucoup plus facile de changer les choses plus tard.

Answer 3

d'abord votre modèle dans un objet jQuery:

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

Réglez ensuite les attributs et l'annexer au DOM.

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

Notez qu'il fait cependant du tout absurde d'ajouter un li directement au DOM depuis li doit toujours être des enfants de ul ou ol. Aussi, il est préférable de ne pas faire jQuery analyser HTML brut. Au lieu de créer 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.

Answer 4

Et voici une 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 au lieu d'injecter directement dans le modèle.

Answer 5

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

Que pensez-vous de cela?

Answer 6

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

1. La variable « modèle » original n'est pas un objet jQuery/DOM et ne peut pas être analysé, il est une chaîne.Faire un objet jQuery en l'enveloppant dans $(), par exemple: template = $ (modèle)

2. Une fois que la variable « modèle » est un objet jQuery vous devez réaliser 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 affectez 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, cela peut être n'importe quel caractère non-espace. Pour plus de détails se référer à: What are valid values for the id attribute in HTML?

PS: Une dernière question avec l'exemple de code est un LI ne peut pas être appliquée sur le corps. Selon les exigences HTML, il doit toujours être contenu dans une liste, c'est-à-dire UL ou OL.