Erfahren Sie, wie Sie ein Element in jQuery erstellen

Eskere Guru

Das Erstellen eines neuen Elements ist eine der grundlegendsten Aufgaben, die Sie mit der jQuery-JavaScript-Bibliothek ausführen können. Mit jQuery ist die Aufgabe viel einfacher als der entsprechende Ansatz mit dem Document Object Model (DOM). Sie werden es auch flexibler und ausdrucksvoller finden, je mehr Sie jQuery verwenden.

Um einen Zweck zu erfüllen, müssen Sie in der Lage sein, Ihr Element einer Webseite hinzuzufügen. Erfahren Sie, wie Sie mit jQuery ein neues Listenelement hinzufügen oder einen Absatz durch neuen Inhalt ersetzen.

Was ist jQuery?

Die jQuery-Bibliothek ist eine Sammlung von JavaScript- Code mit zwei Hauptzielen:

  • Es vereinfacht gängige JavaScript-Operationen.
  • Es behandelt kompatible JavaScript-Probleme zwischen verschiedenen Browsern.

Das zweite Ziel betrifft Fehler, behebt aber auch Implementierungsunterschiede zwischen Browsern. Beide Ziele sind weniger notwendig als früher, da sich die Browser im Laufe der Zeit verbessern. Aber jQuery kann immer noch ein wertvolles Werkzeug sein.

Was ist ein Element?

Ein Element wird manchmal als Tag bezeichnet. Obwohl die beiden oft synonym verwendet werden, gibt es einen subtilen Unterschied. Ein Tag bezieht sich auf das Literal <p> oder </ p>, das Sie in eine HTML-Datei einfügen, um den Textinhalt zu markieren. Ein Element ist das Objekt hinter den Kulissen, das den markierten Text darstellt. Stellen Sie sich ein Element als DOM- Gegenstück zu den HTML-Tags vor.

So erstellen Sie ein neues Element mit jQuery

Wie bei den meisten jQuery-Operationen beginnt das Erstellen eines Elements mit der Dollar-Funktion $ () . Dies ist eine Verknüpfung zur Kernfunktion von jQuery () . Diese Funktion hat drei verschiedene Zwecke:

  • Entspricht Elementen, normalerweise solchen, die bereits im Dokument vorhanden sind
  • Erstellt neue Elemente
  • Führt eine Rückruffunktion aus, wenn das DOM bereit ist

Wenn Sie eine Zeichenfolge übergeben, die HTML als ersten Parameter enthält, erstellt diese Funktion ein neues Element:

 $("<a>")

Dies gibt ein spezielles jQuery-Objekt zurück, das eine Sammlung von Elementen enthält. In diesem Fall gibt es ein einzelnes Objekt, das ein "a" -Element darstellt, das wir gerade erstellt haben.

Die Zeichenfolge muss wie HTML aussehen, um diese Aktion von übereinstimmenden Elementen zu unterscheiden. In der Praxis bedeutet dies, dass die Zeichenfolge mit einem < beginnen muss. Mit dieser Methode können Sie dem Dokument keinen einfachen Text hinzufügen.

Es ist wichtig zu verstehen, dass das Element nicht zu Ihrem Dokument hinzugefügt wird, sondern nur ein neues Element erstellt wird, das Sie hinzufügen können. Das Element ist "nicht verbunden" und nimmt Speicherplatz ein, ist aber noch nicht Teil der letzten Seite.

Hinzufügen von komplexerem HTML

Die Dollar-Funktion kann tatsächlich mehr als ein Element erstellen. Tatsächlich kann es jeden gewünschten Baum von HTML-Elementen erstellen:

 $("<ul><li>one</li><li>two</li><li>three</li></ul>")

Sie können dieses Format auch verwenden, um ein Element mit Attributen zu erstellen:

 $('<img src="photo.jpg" alt="my hometown" />')

So legen Sie Attribute für ein neues Element fest

Sie können ein neues jQuery-Element erstellen und seine Attribute festlegen, ohne die vollständige HTML-Zeichenfolge selbst erstellen zu müssen. Dies ist nützlich, wenn Sie Attributwerte dynamisch generieren. Beispielsweise:

 photo = new Date().getHours() > 12 ? "afternoon.jpg" : "morning.jpg";
 $("<img>", { src: photo });

So fügen Sie ein Element hinzu

Sobald Sie ein neues Element erstellt haben, können Sie es auf verschiedene Arten zum Dokument hinzufügen. In der jQuery-Dokumentation werden diese Methoden unter der Kategorie "Manipulation" zusammengefasst .

Als untergeordnetes Element eines vorhandenen Elements hinzufügen

 $("body").append($("<p>Hello, world</p>"));
 $(document.body).append($el);

Mit dieser Methode können Sie beispielsweise ein neues Listenelement am Ende einer Liste hinzufügen.

Fügen Sie es als Geschwister eines vorhandenen Elements hinzu

 $("p.last").after("<p>A new paragraph</p>")
 $("ul li:first").before("<li>new item</li>")

Dies ist eine gute Wahl, wenn Sie beispielsweise einen neuen Absatz in der Mitte von zwei anderen hinzufügen möchten.

Ersetzen Sie ein vorhandenes Element

Mit der Methode replaceWith () können Sie ein vorhandenes Element gegen ein neu erstelltes Element austauschen :

 $('#old').replaceWith("<p>New paragraph</p>");

Um ein vorhandenes Element wickeln

Dies ist ein ziemlich seltener Anwendungsfall, aber Sie möchten möglicherweise ein vorhandenes Element in ein neues einschließen. Zum Beispiel könnten Sie ein Code – Element haben , dass Sie in einem vorher wickeln wollen:

 $('code#n1').wrap("<pre>")

Zugriff auf das von Ihnen erstellte Element

Die Funktion $ () gibt ein jQuery-Objekt zurück. Dies ist nützlich für Folgeoperationen:

 $el = $("p");
 $('body').append($el);

Beachten Sie, dass jQuery-Programmierer gemäß der Konvention häufig jQuery-Variablen mit einem führenden Dollarzeichen benennen. Dies ist einfach ein Namensschema und steht nicht in direktem Zusammenhang mit der Funktion $ () .

Erstellen von Elementen mit jQuery

Obwohl Sie das DOM mit nativen JavaScript-Funktionen bearbeiten können, erleichtert jQuery dies erheblich. Es ist immer noch sehr nützlich, ein gutes Verständnis des DOM zu haben, aber jQuery macht die Arbeit damit viel angenehmer.