Erfahren Sie, wie Sie ein Element in jQuery erstellen

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 ausdrucksstärker finden, je mehr Sie jQuery verwenden.

Um einen bestimmten Zweck zu erfüllen, müssen Sie Ihr Element zu einer Webseite hinzufügen können. 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 JavaScript-Kompatibilitätsprobleme zwischen verschiedenen Browsern.

Das zweite Ziel befasst sich mit Fehlern, adressiert 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 feinen Unterschied. Ein Tag bezieht sich auf das Literal

oder

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 das 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 Dollarfunktion, $ () . Dies ist eine Abkürzung zum Kern jQuery() Funktion. Diese Funktion hat drei verschiedene Zwecke, sie:

Entspricht Elementen, normalerweise solchen, die bereits im Dokument vorhanden sind
Erzeugt neue Elemente
Führt eine Callback-Funktion aus, wenn das DOM bereit ist

Wenn Sie als ersten Parameter einen String übergeben, der HTML enthält, erstellt diese Funktion ein neues Element:

$(' ')

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.

So verhindern Sie eine Überhitzung von Laptops

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

Es ist wichtig zu verstehen, dass dadurch 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 angehängt“, nimmt Speicher ein, ist aber noch nicht Teil der letzten Seite.

Komplexeres HTML hinzufügen

Die Dollarfunktion kann tatsächlich mehr als ein Element erstellen. Tatsächlich kann es jeden beliebigen Baum von HTML-Elementen erstellen, die Sie möchten:

$('one
two
three
')

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

$(' ')

So legen Sie Attribute für ein neues Element fest

Sie können ein neues jQuery-Element erstellen und seine Attribute festlegen, ohne den vollständigen HTML-String selbst erstellen zu müssen. Dies ist nützlich, wenn Sie Attributwerte dynamisch generieren. Zum Beispiel:

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

So fügen Sie ein Element hinzu

Nachdem Sie ein neues Element erstellt haben, können Sie es auf verschiedene Weise zum Dokument hinzufügen. Die jQuery-Dokumentation fasst diese Methoden unter dem Kategorie „Manipulation“ .

Als untergeordnetes Element eines vorhandenen Elements hinzufügen

$('body').append($('Hello, world
'));  
$(document.body).append($el);

Sie können diese Methode beispielsweise verwenden, um am Ende einer Liste ein neues Listenelement hinzuzufügen.

Fügen Sie es als Geschwister eines vorhandenen Elements hinzu

$('p.last').after('A new paragraph
')  
$('ul li:first').before('new item
')

Dies ist eine gute Wahl, wenn Sie beispielsweise einen neuen Absatz zwischen zwei anderen einfügen möchten.

Ein vorhandenes Element ersetzen

Sie können ein vorhandenes Element gegen ein neu erstelltes austauschen, indem Sie die ersetzen mit() Methode:

$('#old').replaceWith('New paragraph
');

Um ein vorhandenes Element wickeln

Dies ist ein recht seltener Anwendungsfall, aber Sie möchten möglicherweise ein vorhandenes Element in ein neues einschließen. Zum Beispiel könnten Sie a Code Element, das Sie in a einpacken möchten zum :

$('code#n1').wrap('

')

Auf das von Ihnen erstellte Element zugreifen

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äß Konvention jQuery-Variablen häufig mit einem führenden Dollarzeichen benennen. Dies ist nur ein Namensschema und steht nicht in direktem Zusammenhang mit dem $ () Funktion.

Elemente mit jQuery erstellen

Obwohl Sie das DOM mit nativen JavaScript-Funktionen manipulieren können, erleichtert jQuery dies erheblich. Es ist immer noch sehr nützlich, das DOM gut zu verstehen, aber jQuery macht die Arbeit damit viel angenehmer.

Teilen Teilen Tweet Email Der versteckte Held der Websites: Das DOM verstehen

Sie lernen Webdesign und möchten mehr über das Document Object Model wissen? Hier ist, was Sie über das DOM wissen müssen.

Weiter lesen Verwandte Themen

Programmierung
Web Entwicklung
jQuery

Über den Autor Bobby Jack(58 veröffentlichte Artikel)

Bobby ist ein Technologie-Enthusiast, der fast zwei Jahrzehnte lang als Software-Entwickler gearbeitet hat. Er hat eine Leidenschaft für Spiele, arbeitet als Rezensionsredakteur beim Switch Player Magazine und vertieft sich in alle Aspekte des Online-Publishing und der Webentwicklung.

Mehr von Bobby Jack

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren