Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie einen Knoten in JQuery

So erstellen Sie einen Knoten in JQuery

王林
王林Original
2023-05-12 09:07:372151Durchsuche

jQuery ist eine einfache und effiziente JavaScript-Bibliothek, die die Bearbeitung von HTML-Dokumenten erleichtert. In der tatsächlichen Entwicklung müssen wir häufig neue Knoten erstellen und diese dem Dokument hinzufügen.

In diesem Artikel wird erläutert, wie Sie mit jQuery einen neuen Knoten erstellen und ihn dem Dokument hinzufügen.

1. Erstellen Sie einen neuen Knoten.

jQuery bietet eine createElement()-Methode zum Erstellen eines neuen Knotens. Diese Methode akzeptiert einen Parameter, der den Tag-Namen des zu erstellenden Elements darstellt.

Um beispielsweise ein neues div-Element zu erstellen, können Sie den folgenden Code verwenden:

var newDiv = $("<div>");

Im obigen Code verwenden wir die Methode $(), um ein neues zu erstellen jQuery-Objekt und weisen Sie es der Variablen newDiv zu. Da wir in der Methode $() keine Parameter übergeben, wird ein leeres div-Element erstellt.

2. Knotenattribute festlegen

Nachdem wir einen neuen Knoten erstellt haben, können wir die Knotenattribute wie ID, Klasse, Stil usw. festlegen. jQuery bietet einige Methoden zum Festlegen dieser Eigenschaften, z. B. attr(), addClass(), css() usw.

Um beispielsweise ein ID-Attribut zu einem neu erstellten div-Element hinzuzufügen, können Sie den folgenden Code verwenden:

var newDiv = $("<div>").attr("id", "myDiv");

Im obigen Code verwenden wir attr() Methode zum Festlegen von newDiv Das ID-Attribut des Objekts ist „myDiv“.

3. Untergeordnete Knoten hinzufügen

Nachdem wir einen neuen Knoten erstellt und seine Eigenschaften festgelegt haben, müssen wir ihn möglicherweise dem Dokument hinzufügen. Hier sind zwei Situationen, um das Hinzufügen vorzustellen.

  1. Am Ende des übergeordneten Knotens hinzufügen

Wenn wir den Knoten am Ende eines vorhandenen übergeordneten Knotens hinzufügen möchten, können wir dies tun Verwenden Sie die append()-Methode des übergeordneten Knotens.

Um beispielsweise das im obigen Code erstellte newDiv-Element am Ende des Body-Elements hinzuzufügen, können Sie den folgenden Code verwenden:

$("body").append(newDiv);

Im obigen Code Wir verwenden append() Die Methode fügt das newDiv-Element am Ende des Body-Elements hinzu.

  1. Zur angegebenen Position hinzufügen

Wenn wir den Knoten an der angegebenen Position eines vorhandenen übergeordneten Knotens hinzufügen müssen, können wir das verwenden Die Methode insertBefore() oder insertAfter() des übergeordneten Knotens.

Um beispielsweise das im obigen Code erstellte newDiv-Element vor dem ersten untergeordneten Knoten des Body-Elements hinzuzufügen, können Sie den folgenden Code verwenden:

$("body").children().first().before(newDiv);

Oben Im Code verwenden wir zunächst die Methode children(), um alle untergeordneten Knoten des Body-Elements abzurufen, verwenden dann die Methode first(), um den ersten untergeordneten Knoten abzurufen, und verwenden die Methode before(), um das Element newDiv vor dem ersten hinzuzufügen untergeordneter Knoten.

4. Zusammenfassung

Durch die Einleitung dieses Artikels haben wir gelernt, wie man mit jQuery einen neuen Knoten erstellt und ihn dem Dokument hinzufügt. Wir können einen neuen Knoten über die Methode createElement() erstellen, Knotenattribute über attr(), addClass(), css() und andere Methoden festlegen und Knoten über append(), insertBefore(), insertAfter() und andere Methoden hinzufügen . in das Dokument. Die Beherrschung dieser Methoden kann uns helfen, HTML-Dokumente schnell und effizient zu bearbeiten.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Knoten in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn