Heim  >  Artikel  >  Web-Frontend  >  Detaillierte grafische Erklärung zum Erstellen und Hinzufügen von Knoten mit jQuery

Detaillierte grafische Erklärung zum Erstellen und Hinzufügen von Knoten mit jQuery

yulia
yuliaOriginal
2018-10-12 14:41:374484Durchsuche

jQuery ist ein auf JavaScript basierendes Framework. Es wird aufgrund seiner Einfachheit und Bequemlichkeit häufig verwendet. Wissen Sie, wie man Knoten mit jQuery erstellt und hinzufügt? In diesem Artikel erfahren Sie, wie Sie mit jQuery Knoten erstellen und hinzufügen. Interessierte Freunde können darauf verweisen.

Hinweis: Wenn Sie jQuery verwenden, müssen Sie zuerst die jQuery-Datei

Methode 1, append()-Methode

append() kann Knoten hinzufügen und sie am Ende des ausgewählten Elements hinzufügen

Beispiel: Drachenfrucht am Ende hinzufügen ungeordnete Liste Dieses Element

Beschreibung: Erstellen Sie zuerst ein
  • -Element, suchen Sie dann den übergeordneten Knoten des
  • -Elements und fügen Sie diesen Knoten schließlich zum
      -Element hinzu. Der Code lautet wie folgt:

      <!DOCTYPE html>
      <html>
       <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
       </head>
       <body>
        <ul>
         <li>榴莲</li>
         <li>西瓜</li>
         <li>橘子</li>
         <li>雪梨</li>
        </ul>
        <button id="btn">点击添加</button>
       </body>
       <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                $("ul").append(" <li>火龙果</li>");
            });      
        });
       </script>
      </html>

      Der Effekt ist wie im Bild gezeigt:

      Detaillierte grafische Erklärung zum Erstellen und Hinzufügen von Knoten mit jQuery

      Methode 2, prepend()-Methode

      Die prepend()-Methode kann Knoten hinzufügen, die am Anfang des ausgewählten Elements hinzugefügt werden


      Beispiel: Drachenfrucht als erstes Element zur ungeordneten Liste hinzufügen

      Der Code lautet wie folgt:

      <!DOCTYPE html>
      <html>
       <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
       </head>
       <body>
        <ul>
         <li>榴莲</li>
         <li>西瓜</li>
         <li>橘子</li>
         <li>雪梨</li>
        </ul>
        <button id="btn">点击添加</button>
       </body>
       <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                $("ul").prepend(" <li>火龙果</li>");
            });      
        });
       </script>
      </html>

      Der Effekt ist wie in der Abbildung gezeigt:

      Detaillierte grafische Erklärung zum Erstellen und Hinzufügen von Knoten mit jQueryDarüber hinaus gibt es die Methode after() und before() Verfahren. Die after()-Methode in jQuery fügt Inhalte nach dem ausgewählten Element ein, und die before()-Methode fügt Inhalte vor dem ausgewählten Element ein. Das Wesentliche ähnelt append() und prepend() und wird hier nicht demonstriert.

      Das Obige stellt die Methode zum Erstellen von Knoten und zum Hinzufügen von Knoten in jQuery vor. Es ist relativ einfach, die Methode after() und before() selbst auszuprobieren wie möglich. Weitere verwandte Tutorials finden Sie unter

      jQuery-Video-Tutorial

  • Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung zum Erstellen und Hinzufügen von Knoten mit 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