Erstellen von jQuery ein neues Elemente

Question

Dies könnte sehr noobish zu fragen, aber ich bin sehr neu auf jQuery als ich erkennen, dass ich es nicht vermeiden kann, für immer.

Ich brauche eine einfache Erklärung eines Beispiels, dass ich verfolge, verstehe ich das Endergebnis, aber ich würde gerne wissen, was jeder Teil tut.

function example1 (a) { 
    var i = $('<div />').text(a).html(); 

    $('body').append('<li><strong>' + i + '</strong></li>') 
} 

So schafft das Beispiel ein neues Element und fügt es dem Körper, wie Sie das Endergebnis vielleicht erraten haben.

Dies ist jedoch, wo ich verwirrt $('<div />').text(a).html() ... Ich weiß $('<div />') ein neues Element erzeugt stattdessen die vorhandene divs der Auswahl ... aber wenn ich diese Funktion auf eine Schaltfläche anwenden klicken sie schafft nur diesen Teil <li><strong>' + i + '</strong></li> .. Was ist mit dem neuen Div passiert? Auch deshalb ist die Auswahl das Beispiel die .text(a).html() und wenn ich das eine oder das andere der .text(a).html() es alle vermasselt entfernen?

Ich hoffe, das macht Sinn und danken Ihnen im Voraus :)

Answer 1

Die DIV Sie erstellt nicht mehr zugegriffen werden, wenn die Funktion zurückkehrt, so dass es Müll ist, die durch die GC zurückgewonnen werden kann.

Zweck der Verwendung von .text(a).html() ist die Konvertierung des Texts a in HTML-Entitäten, um Cross-Site Scripting (XSS) -Angriffe zu verhindern. .text(a) setzt den Text des DIV, ohne a als HTML zu interpretieren. Dann erhält der Zugriff auf .html() den resultierenden HTML-Code, der die gleiche Ausgabe erzeugt. Z.B. Wenn Sie example1('<div>') aufrufen, wird i = '<div>' festgelegt.

Diese temporäre DIV nicht wirklich benötigt, da Sie, indem Sie den Text das gleiche tun kann, wenn das <strong> Element:

function example2(a) { 
 
    $('ul').append(
 
    $('<li>').append($('<strong>', { 
 
     text: a 
 
    })) 
 
); 
 
} 
 

 
example2("item 1"); 
 
example2("item <div> 2");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
</ul>

Answer 2

Das div Element, das Sie noch gerade erstellt existiert (während innerhalb der Funktion) - aber es ist nicht Teil des DOM des Dokuments (es sei denn, Sie verwendet append um es dem DOM hinzuzufügen).

Beachten Sie, dass der Garbage Collector von Javascript wahrscheinlich, dass die DOM-Knoten gelöscht werden, da nach dieser Funktion wird es kein Verweis auf das DOM-Element sein, so dass es nicht mehr benötigt wird.