Extending a DOM element with jQuery

Question

I'd like to extend a DOM element without extending all of them. That is, I'd like a custom class with its own methods and properties, but also be able to treat it as a div. E.g.

 MyClass = function(){
    this.foo = "waaa";
 }
 MyClass.prototype.changeText = function(newtext){
    // if this extended $(document.createElement("div")) something
    // like this might be possible
    this.html(newtext);
 }
 MyClass.prototype.alertFoo = function(){
    alert(this.foo);
 }

 var m = new MyClass();
 $("body").append(m);
 m.changetext();

Is this possible?

Answer 1

You can make your class a child class of the jquery generated DIV element:

function MyClass (){
    this.foo = "waaa";
}
MyClass.prototype = $('<div/>');
MyClass.prototype.changeText = function(newtext){
    this.html(newtext);
}
MyClass.prototype.alertFoo = function(){
    alert(this.foo);
}

var m = new MyClass();
$("body").append(m);
m.changeText('appletree');

Answer 2

You could make your own object, like you are doing. Then you can use jQuery's extend method to extend the element.