Wie erstellt man einen DOM-Knoten als Objekt?

Question

Ich möchte einen DOM-Knoten erstellen, legen Sie das Attribut 'ID' und dann an 'Körper' anhängen. Die folgende scheint nicht zu arbeiten, weil jQuery nicht meine Vorlage als Objekt sehen:

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

Wie kann ich jQuery sagen zu behandeln dies als ein Objekt so finden() funktioniert auf sie?

Answer 1

Ich würde es zuerst in das DOM setzen. Ich bin mir nicht sicher, warum mein erstes Beispiel fehlgeschlagen ist. Das ist wirklich komisch.

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  

Putting e (die Erträge Elemente) gibt jQuery context unter denen die CSS-Selektor anzuwenden. Dadurch wird verhindert, dass die ID auf andere Elemente in der DOM-Struktur angewendet wird.

Das Problem scheint zu sein, dass Sie das UL nicht verwenden. Wenn Sie eine leere Li in den DOM-Baum stecken, werden Sie Probleme haben. Ich dachte, es könnte damit umgehen/umgehen, aber es geht nicht.

Sie können keine nackten LI's in Ihren DOM-Baum für Ihre "echte" Implementierung einfügen, aber die ULs sind notwendig, damit dies funktioniert. Seufzer.

Beispiel: http://jsbin.com/iceqo

By the way, können Sie auch in microtemplating interessiert.

Answer 2

Versuchen Sie folgendes:

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

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

Offensichtlich ist es macht keinen Sinn, einen li, um den Körper direkt anzuhängen. Im Grunde besteht der Trick darin, den DOM-Elementbaum mit $ ('Ihr html hier') zu konstruieren. Ich schlage vor, CSS-Modifikatoren (.text(), .addClass() usw.) zu verwenden, im Gegensatz zu JQuery, um HTML-Rohdaten zu analysieren, was es wesentlich einfacher macht, Dinge später zu ändern.

Answer 3

zuerst Ihre Vorlage in ein jQuery-Objekt machen:

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

dann die Attribute festgelegt und an die DOM anhängen.

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

Beachten Sie, dass es aber überhaupt keinen Sinn macht, einen li direkt mit dem DOM hinzuzufügen, da li immer Kinder ul oder ol sein sollte. Außerdem ist es besser, jQuery nicht raw HTML zu parsen. Erstellen Sie stattdessen eine li, legen Sie ihre Attribute fest. Erstelle ein Div und setze seine Attribute. Fügen Sie das div in das li ein und fügen Sie dann das li an das DOM an.

Answer 4

Und hier ist das Motto:

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

Aber ich frage mich, warum Sie mögen, dass das Attribut „id“ zu einem späteren Zeitpunkt hinzufügen, anstatt sie direkt in der Vorlage zu injizieren.

Answer 5

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

Was ist damit?

Answer 6

Es gibt drei Gründe, warum Ihr Beispiel fehlschlägt.

1. Die ursprüngliche 'Vorlage'-Variable ist kein jQuery/DOM-Objekt und kann nicht analysiert werden, es ist eine Zeichenfolge.Machen Sie es ein jQuery-Objekt, indem sie es in $() packen, wie zum Beispiel: template = $ (Template)

2. Sobald die 'Vorlage' Variable ein jQuery-Objekt Sie müssen erkennen, dass <li> ist das Stammobjekt. Daher können Sie nicht nach dem LI-Wurzelknoten suchen und Ergebnisse erhalten. Wenden Sie die ID einfach auf das jQuery-Objekt an.

3. Wenn Sie einem HTML-Element eine ID zuweisen, darf es vor HTML5 nicht mit einem Zahlenzeichen mit einer HTML-Version beginnen. Es muss mit einem alphabetischen Zeichen beginnen. Bei HTML5 kann dies ein beliebiges Nicht-Leerzeichen sein. What are valid values for the id attribute in HTML?

PS:: Einzelheiten zu entnehmen Eine endgültige Ausgabe mit dem Beispielcode ist ein LI kann nicht auf den Körper aufgetragen werden. Gemäß den HTML-Anforderungen muss es immer in einer Liste enthalten sein, d. H. UL oder OL.