Function Type

[codefossa]

How would you create an element that comes after the element you wish for it to act on in plain JS?  I don't want to use JQuery for it.

 

window.document.getElementById("id").myFunction('option');

 

Then to be able to act on that element like this.style.display = 'none'; inside the function.

 

Thanks.

[requinix]

You mean like jQuery's insertAfter()?

existingelement.parentNode.insertBefore(newelement, existingelement.nextSibling);

[codefossa]

No.  I want to create a function that acts on the element as that function does though.

 

Instead of:

myFunc(element, parameter);

 

I want:

element.myFunc(parameter);

[kicken]

You would have to be extend that element's prototype but that is generally a bad idea and you should avoid it.

 

If your goal is to get the `this' value to be the element inside the function then you could do it with something like:

myFunc.call(element, 'arg');

 

but that's not better than just doing myFunc(element, 'arg');

 

[requinix]

You would have to be extend that element's prototype but that is generally a bad idea and you should avoid it.

I've seen some arguments against it but most of them deal with distributed libraries using it (eg, Prototype), adding unofficial functionality that's added officially later (eg, getElementsByClassName), or sticking stuff into the "wrong" prototype (eg, Prototype and getElementsByClassName+each). In cases where the code is just for myself and I'm adding simple functionality to something that won't change or won't have a different implementation then I don't see a problem. Maybe I just don't see all of it?

 

Take hiding an element. Node.hide() is very cut and dry: take this Node and hide it visually. A NodeList.each() is a bit iffier: the first argument is very likely going to be a function, except that function could run in the Node's scope and/or take an argument for the Node. But even then you can

NodeList.prototype.each = function(obj) {
    var self = obj || this;

It's extra coding but you gain a handy function.

[kicken]

I haven't really looked into it in a while but I remember that there used to be problems with browser compatibility if you started messing around with native prototypes too much.  More so with things like DOM prototypes instead of JS Natives like Array or String.  Now that it seems like browsers have more consistent prototype setups it may not be as big of a problem.

 

*/me is still stuck in the old days sometimes*