How JQuery could extend an element with another one containing event handlers?

Question

Is there a solution to create a dummy element with its properties, methods and event handlers and extend an existing element with it ? For example :

var dummyElement = $('<div />', {
  // properties
  ...
  // methods
  ...
  // event handlers
  ...
});

and then,

$.extend( $('#myElement'), dummyElement );

Now, $('#myElement') has the dummyElement's properties, methods and event handlers, in addition to its own.

Is it possible? How could I do that with JQuery ?

Thank you

Answer 1

Ok. Thanks to the different answers, particularly from Lee. It seems that the $.extend(...) jQuery method is not designed to extend a DOM element from another one. But it can extend a DOM element from an object. Here is a solution to do that :

1) First I create the extension objects. Each of these extensions must have an initExtension() method defined. Here is an example for creating two extension objects :

var myObjExtension1 = {
  // constructor
  initExtension : function() {
    // Add some data properties
    this.something = 'something';

    // Add some method properties
    this.doSomething = function() { alert(this.something); };

    // Add some DOM elements
    $(this).append('<div>element created from extension 1</div>');  

    // Add some event handlers
    $(this).click(
      function(evt) {
        $(this).append('<div>element created from extension 1 click event</div>');
      }
    );
  }
};

var myObjExtension2 = {
  // constructor
  initExtension : function() {
    // Add some data properties
    this.more = 'more';

    // Add some method properties
    this.doMore = function() { alert(this.more); };

    // Add some DOM elements
    $(this).append('<div>element created from extension 2</div>');  

    // Add some event handlers
    $(this).click(
      function(evt) {
        $(this).append('<div>element created from extension 2 click event</div>');
      }
    );
  }
};

2) In order to extend easily all the elements I need to extend, I created a little jQuery plug-in. This plug-in contains one method that extend the source element with the specified extension:

(function($){
  $.fn.extendWith = function( objExtension ) {
    this.each( 
      function(index) {
        $.extend( this, objExtension );
        this.initExtension();
      }
    );
    return this; // jQuery chaining
  }
})(jQuery);

3) Finally, I extend some jQuery elements. Note that in the following example, I extend the elements that match the someElement class, first with the myObjExtension1 and then with the myObjExtension2, by chaining the extendWith(...) plug-in method:

$('.someElement').extendWith( myObjExtension1 ).extendWith( myObjExtension2 );

Now, all the myObjExtension1 and myObjExtension2 data properties, method properties and event handlers are available from my $('.someElement') elements. Example:

$('.someElement').each( function() {
  this.doSomething();
  this.doMore();
});