Comment créer un nœud DOM comme un objet?

Question

Je voudrais créer un nœud DOM, définissez l'attribut "id", puis l'ajouter à "corps". La suite ne semble pas fonctionner parce que jQuery n'est 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 savoir jQuery pour traiter cela comme un objet de manière à trouver() fonctionne sur elle?

Answer 1

Je l'avais mis dans les DOM en premier. 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 contexte dans lequel appliquer le sélecteur CSS. Cela l'empêche de l'application de l'ID à d'autres éléments dans l'arborescence DOM.

Le problème semble être que vous n'êtes pas à l'aide de l'UL. Si vous mettez un nu li dans l'arborescence DOM, vous allez avoir des problèmes. J'ai pensé qu'il pourrait manipuler/solution de contournement, mais il ne peut pas.

Vous ne pouvez pas mettre à nu LI dans votre arborescence du DOM pour votre "réel" de la mise en œuvre, mais l'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);

Évidemment, il n'est pas judicieux d'ajouter un li à l'organisme directement. En gros, le truc, c'est de construire les DOM elementr arbre avec $('html ici'). Je suggère l'utilisation de CSS modificateurs (.text ().addClass (), etc) plutôt que de faire jquery parser du HTML brut, il sera beaucoup plus facile de changer les choses par la suite.

Answer 3

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

Quoi à ce sujet?

Answer 4

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

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

Puis définir les attributs et l'ajouter à la DOM.

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

Notez cependant qu'il n'a pas de sens à tout pour ajouter un li directement vers les DOM depuis li devraient toujours être des enfants d'ul ou ol. Aussi, il est préférable de ne pas faire de jQuery parser du HTML brut. Au lieu de créer un li, définir ses attributs. Créer un div et de l'ensemble des attributs. Insérez la div dans le li puis ajouter la li pour les DOM.

Answer 5

Et ici, c'est la seule ligne:

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

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