.empty and .html looks in every node that it removes/replaces and
checks for and removes event bindings in order to prevent memory
leaks. If you know you do not have bound events, first use plain old
javascript to set element.innerHTML = ''; and then remove/replace the
element using .empty()/.html() Though in the case of .empty it could
be redundant.
On Aug 26, 12:01 pm, James <james.gp....@gmail.com> wrote:
> I've found something that worked a faster to empty something when I
> tested it.
>
> function replaceHtml(el, html) {
> var oldEl = typeof el === "string" ? document.getElementById(el) :
> el;
> if (oldEl == null) return null;
> var newEl = oldEl.cloneNode(false);
> newEl.innerHTML = html;
> oldEl.parentNode.replaceChild(newEl, oldEl);
> return newEl;
>
> };
>
> replaceHtml(Container_Id, '');
>
> On Aug 26, 8:54 am, MorningZ <morni...@gmail.com> wrote:
>
> > "What is jQuery doing to empty an element?"
>
> > That's so easy to see/find-out for yourself
>
> > open up the jquery.js file, search for "emtpy" and voila
>
> > empty: function() {
> > // Remove element nodes and prevent memory leaks
> > jQuery(this).children().remove();
>
> > // Remove any remaining nodes
> > while (this.firstChild)
> > this.removeChild(this.firstChild);
> > }
>
> > "2. Are there any rules when not to use jQuery for certain DOM tasks
> > but better to resort to direct DOM manipulation as in the example
> > above? "
>
> > One option that I've seen recommended a lot is to set the ".innerHTML"
> > of the DOM object to empty string..... i remember that it's fast, but
> > I can't remember if there were downsides to using that instead
>
> > On Aug 26, 2:32 pm, oleOhle <mohleme...@googlemail.com> wrote:
>
> > > While writing my first jQuery application I encountered a performance
> > > issue whichs casts doubts on the suitability of jQuery for my purposes
> > > in general.
>
> > > The "issue": In my page I have a dynamically filled <div> which in the
> > > end contains about 10 elements, one of which is a table with 1000
> > > rows. Now when I try to clear that <div> with a simple function like
>
> > > function clearContainer() {
> > > $('#' + Container_ID).empty();
>
> > > }
>
> > > this will take forever, i.e. one faster machine a few seconds, on my
> > > netbook it even leads to javascript timeout errors.
>
> > > Rewriting the function to
>
> > > function clearContainer() {
> > > var containerNode = document.getElementById(Container_ID);
> > > while(containerNode.hasChildNodes()) {
> > > containerNode.removeChild(containerNode.lastChild);
> > > }
>
> > > }
>
> > > fixes the perfomance issue, the <div> is cleared almost immediately.
>
> > > Two questions remain:
> > > 1. How can the results be explained? What is jQuery doing to empty an
> > > element?
> > > 2. Are there any rules when not to use jQuery for certain DOM tasks
> > > but better to resort to direct DOM manipulation as in the example
> > > above?
