insertAdjacentElement equivalent

IE has a nifty method called insertAdjacentElement (http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacentelement.asp) with which you can say things like "move this object before that object" or "move that object between these two objects", just like that. Very useful.

So, how can I do the same thing with non-proprietary methods?

Sure, just use appendChild(), or insertBefore(), like so:


HTMLElement.protoype.insertAdjacentElement = function(where, element) {
switch (where.toLowerCase()) {
case "beforebegin":
this.parentNode.insertBefore(element, this);
break;
case "afterbegin":
this.insertBefore(element, this.firstChild);
break;
case "beforeend":
this.appendChild(element);
break;
case "afterend":
this.parentNode.insertBefore(element, this.nextSibling);
break;
}
}

excellent :D




<aftershock>
Hey ... I just realised ... you used prototype to make gecko recognise an IE-proprietary method name ... ;)

... invent any methods with any behavior and any name ... anything in fact ....

Dagnammit! I was impressed before; but this element-prototyping is so so cool :thumbsup:
</aftershock>

http://www.webfx.eae.net/dhtml/ieemu/

It gets really cool when to put setters and getters onto prototyped elements, like

HTMLElement.prototype.__defineGetter__("outerHTML", function() {
return (new XMLSerializer()).serializeToString(this);
});

:)

From my experience, you shouldn't go add prototype methods or getters/setters on DOM objects - they aren't garbage collected correctly unless you close down mozilla - meaning the entire application, not only the page or even all open browser windows.

On the other hand, string concatenation using += also leaks (but far less), so in comparison that might not be that much of an issue. Besides, memory is cheap these days.

Originally posted by liorean
From my experience, you shouldn't go add prototype methods or getters/setters on DOM objects - they aren't garbage collected correctly unless you close down mozilla - meaning the entire application, not only the page or even all open browser windows.

Have a bug number?

What is a memory leak anyway? I hear it bandied about, but I've no idea what it means.

A memory leak is when the browser doesn't return the memory for an object whose refcount has gone down to zero, or that the refcount actually never reaches zero and therefore doesn't garbage collect the object. For IE this often means not as long as you don't restart your computer, while for mozilla, it's often only until page reload or you close down the application. In the few cases I've seen it happen in Opera, it's been reclaimed as soon as you start the browser again. This meant I sometimes got a 300MB extra memory comsumption as soon as I started Opera. (7 beta 1 did this, I've never seen it happen in other versions)

JDK: No one single, but there's several covering it. There seems to have been a number of different things that all act together on DOM objects. (most were fixed before 1.0, by the way)

Originally posted by liorean
JDK: No one single, but there's several covering it. There seems to have been a number of different things that all act together on DOM objects. (most were fixed before 1.0, by the way)

Not even a tracker bug? (I'm hesitant to search through Bugzilla on a wild goose chase). Also, if most were fixed before 1.0, then why worry? 1.0 is the lowest version of Mozilla you should ever keep in mind while developing.