2010-02-19 11 views
9

Ich verwende jQuery und habe ein Tabellenelement, das ein paar hundert Zeilen enthält. Ich möchte alle Zeilen entfernen und dann eine neue Reihe von Zeilen hinzufügen. Ich tue dies, indem ich entferne und dann an das Elternelement anhänge.Was ist der schnellste Weg, um untergeordnete Elemente aus dem DOM in IE zu entfernen?

Meine append Logik ist ziemlich schnell, und folgt den Rat hier gegeben: http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

jedoch der einzige Anruf dauert 5 mal so lang wie die Append zu entfernen. Was ist der schnellste Weg, die Kinder eines dom-Elements zu löschen?

EDIT: Hier ist eine verkürzte Version des Codes verwende ich:

var table = $('#mytable'); 
$('tbody', table).remove(); 
table.append(tBodyContents.join('')); 

tBodyContents ist ein Array von Strings, dass, wenn in der tbody einen den HTML für die Zeilen bilden kombiniert.

+0

Können Sie uns Ihren Code zeigen? – Sampson

+0

können Sie den Code posten, den Sie verwenden, um alle Zeilen zu entfernen? – SBUJOLD

+0

Setzen Sie es dort hinein; Entschuldigung, ich habe es vorher nicht aufgenommen! – bluemoo

Antwort

6
function emptyElement(element){ 
    var i = element.childNodes.length; 
    while(i--){ 
    element.removeChild(element.lastChild); 
    } 
} 

dieser ist tatsächlich schneller als der innerHTML Trick, kann viel schneller sein, abhängig von Ihrem Browser. Es gibt ein paar Tests auf JSperf mit ähnlichen Funktionen, die Ihnen einige Benchmarks geben wird ...

+2

Zum Beispiel http://jsperf.com/jquery-empty-vs-html/14 –

+0

Ich bin nicht sicher, warum die angenommene Antwort ist .html (''), während dies in der Tat eine viel schnellere Lösung ist. Das Festlegen von innerHTML oder .html() auf eine leere Zeichenfolge wird aufgrund ihrer Leistung tatsächlich als schlechte Methode angesehen. Um meine Worte zu sichern, hier ist ein Test: http: // jsperf.com/innerhtml-vs-removechild/239 – boyomarinov

7

ich normalerweise

$('#myTableToEmpty').html(''); 

Dann Reihen erneut hinzufügen, wo nötig.

+0

Wahrscheinlich schneller als $ ('# myTableToEmpty tr'). Remove() – ryanulit

+0

Ich mache das gleiche. Es ist einfach und schnell. +1 –

+3

Löscht diese Methode auch gebundene Ereignisse und jQuery-Daten? Das ist eine Sache, die (nach den Dokumenten) die remove() - Funktion tut. BEARBEITEN: Aus der Dokumentation - * Zusätzlich zu den Elementen selbst werden alle gebundenen Ereignisse und jQuery-Daten, die den Elementen zugeordnet sind, entfernt. * – user113716

1

Wenn die Geschwindigkeit ist wirklich, wirklich wichtig ist, sind Sie am besten innerHTML- zu verwenden. $ ('tbody', Tabelle) [0] .innerHTML = '';

Ich persönlich würde nur jQuery ignorieren, geben Sie dem Körper eine ID und gehen Sie für die Option document.getElementById ('ID'). InnerHTML = ''. Und natürlich nutzen Sie jQuery zum Hinzufügen.

+0

Ich bekomme einen "Unbekannten Laufzeitfehler", wenn ich das versuche. Ich werde sehen, ob ich herausfinden kann, was ich falsch mache. – bluemoo

0

Ich bestätige innerHTML ist sehr viel schneller zu entfernen große HTML von einem einzigen Element. In meinem Fall:

$('#main').html(''); // --> approx 5-6 seconds 

$('#main').innerHTML=''; // --> a few milliseconds 

Danke für die Tipps

Verwandte Themen