it-swarm.com.de

Beste Möglichkeit, DOM-Elemente mit jQuery hinzuzufügen

Ich habe also drei Möglichkeiten gesehen, HTML-/DOM-Elemente zu einer Seite hinzuzufügen. Ich bin gespannt, was die Vor-und Nachteile für jeden von ihnen sind. 

1 - Traditionelles JavaScript

Ich glaube, der direkte Weg des JS besteht darin, jedes Element zu konstruieren, Attribute festzulegen und dann anzufügen. Beispiel:

var myRow = document.createElement("tr");
myRow.class = "myClass";

var firstTD = document.createElement("td");
firstTD.innerHTML = "first";
myRow.appendChild(firstTD);

var secondTD = document.createElement("td");
secondTD.innerHTML = "second";
myRow.appendChild(secondTD);

document.getElementById("myContainer").appendChild(myRow);

2 - Anhängen eines HTML-Strings über jQuery

Ich habe festgestellt, dass die meisten jQuery-Beispiele, die ich sehe, in der Regel nur eine HTML-Zeichenfolge anhängen.
Beispiel:

$("#myContainer").append('<tr class="myClass"><td>first</td><td>second</td></tr>');

3 - jQuery .clone ()

Ich habe auch viele Verwendungen und Verweise auf .clone () in jQuery gesehen.
Beispiel:

$("#myContainer").append($(".myClass").Clone());

Ich würde gerne hören, was andere dazu sagen.

(Dies scheint auch ein guter Kandidat für ein "Community-Wiki" zu sein, aber ich kenne mich mit ihnen nicht aus. Wird jemand einen Kommentar abgeben und mich wissen lassen, ob es sein sollte? Danke)

42
sdr

Wenn Sie jQuery 1.4 verwenden, ist der beste Weg der folgende:

$("<a/>", {
    id: 'example-link',
    href: 'http://www.example.com/',
    text: 'Example Page'
}).appendTo("body");
62
sp.

Wenn Sie bereits ein Vorlagenelement haben, das Sie kopieren möchten, verwenden Sie auf jeden Fall clone ().

Wenn Sie jedoch ein Element von Grund auf neu erstellen möchten, gibt es im Wesentlichen zwei Methoden, auf die Sie meiner Meinung nach anspielten:

  1. Erstellen Sie DOM-Elemente als Objekte (z. B. mit createElement).
  2. Erstellen Sie DOM-Elemente als HTML-Code (z. B. mit innerHTML oder hQuml von jQuery).

Wenn eine der Methoden intuitiver oder einfacher für Sie zu schreiben ist, empfehle ich das einfach. 

Ansonsten hat die Verwendung des letzteren den Vorteil, dass es sauberer ist, wenn das Element viele Kinder hat. Versuchen Sie beispielsweise, eine Tabellenzeile mit 6 Spalten zu erstellen, von denen jede mit der ersten Methode eine andere Klasse hat. Ihr Code ist viel länger als bei der zweiten Methode.

Was die Performance betrifft, ist dies ein guter Leitfaden http://andrew.hedges.name/experiments/innerhtml/ , aber die kurze Antwort ist in den meisten Fällen die Unterschiede recht vernachlässigbar. Ein guter Leitfaden für die allgemeine Performance ist: http://www.artzstudio.com/2009/04/jquery-performance-rules/ . Der 6. Tipp hat mit der DOM-Manipulation zu tun.

4
jhchen

Bestehenden Inhalt klonen ...

var $ html = $ template.clone ();
  $ html.find (''); /// nach inhalt ändern ... 

Wegen Kloninhalt steht mit 'DOM' Eigenschaften. Dann können Sie diese Tags, Eigenschaften und Werte ändern und dann anhängen.

0
pradeep

Wenn Sie mit großen Mengen an HTML arbeiten, die Sie wiederverwenden möchten, schlage ich vor: http://api.jquery.com/jQuery.template/ . Dies ist final, wird aber durch ersetzt etwas Besseres.

Ich verwende es in einer Produktionsumgebung und es ist toll, wie für kleinere Teile von HTML, was sp. gesagt ist der beste Weg

0
Clarence Liu

Sie können dies versuchen:

 $("<div/>", {

  // PROPERTIES HERE

  text: "Click me",

  id: "example",

  "class": "myDiv",      // ('class' is still better in quotes)

  css: {           
     color: "red",
     fontSize: "3em",
     cursor: "pointer"
  },

  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },

  append: "<i>!!</i>",

  appendTo: "body"      // Finally, append to any selector

}); 
0
Re_p1ay

Wenn Sie bereits über jQuery verfügen, verwenden Sie es. Wenn Sie es nicht hosten möchten, verwenden Sie die gehostete Version von Google. Am Ende werden immer die native Javascript-Methode createElement oder innerHTML aufgerufen. Also würde ich Nr. 2 und Nr. 3 verwenden, wenn ich speziell ein vorhandenes Element auf der Seite klonen müsste.

0
Mike Sherov