So fügen Sie HTML zu einer Seite mit jQuery

jQuery kann verwendet werden, HTML zu einer Seite hinzuzufügen. Sie können alle Arten von HTML, Bilder hinzufügen, einfach alles, und ganz das Layout der Seite ändern mit jQuery. so tut nicht wirklich eine gute Idee, weil es wirklich zu bekommen, wirklich herauszufinden, verwirrend, was von wo kommt und auch schwieriger sein kann, in die Zukunft zu erhalten, wenn Sie die Seite ändern müssen.

In jedem Fall Hinzufügen von HTML für Dinge wie Fehlermeldungen oder um Daten zu einer Seite hinzuzufügen, ist durchaus üblich. Denken Sie an eine Reise-Website, die Fluginformationen sucht. Sie auf eine Schaltfläche klicken, und es baut die Ergebnisse dynamisch, direkt auf der gleichen Seite. Diese Seiten verwenden javascript, um viele Male jQuery, diese Leistung zu vollbringen.

Aber bevor Sie gehen HTML zu ändern, sollten Sie lernen, wie HTML zu einer Seite hinzuzufügen.

Diese Auflistung zeigt eine einfache HTML-Seite, die eine Liste von Elementen erzeugt.

jQuery

Hinzufügen von HTML

  • Hier ist 1
  • Hier ist 2

Eine Seite in einem Webbrowser angezeigt sieht aus wie diese:

bild0.jpg

Die Seite nutzt eine ungeordnete Liste mit zwei Einträgen. Sie können mit dem jQuery ein anderes Element zu dieser Liste hinzufügen anhängen () Funktion. so bedeutet Handeln, das Element der Auswahl, die Sie bereits wissen, wie zu tun, und dann wird der Aufruf anhängen () Funktion. Hier ist ein Beispiel ein drittes Element zur Liste hinzuzufügen:

$ ( "# TheList"). Anhängen ( "
  • Hier sind 3
  • ") -

    Wie Sie sehen können, können Sie das Element wählen Sie eine ID-Selektor und dann den Anruf anhängen () Funktion mit dem HTML hinzuzufügen. Wird nicht viel einfacher.

    Diese Auflistung zeigt den endgültigen Code. Beachten Sie, dass jQuery es wurde in dem Abschnitt hinzugefügt, und die anhängen () Funktion innerhalb der bereit() Funktion.

    jQuery 

    Hinzufügen von HTML

    • Hier ist 1
    • Hier ist 2

    Wenn in einem Browser betrachtet, sieht das Ergebnis wie folgt aus:

    image1.jpg

    Menü