JQuery Dynamically load div class

Question

I know i have an error on this and i feel so new but i need to ask for help. Here is the code i need to fix. I get the follow error: Uncaught TypeError: Cannot read property 'find' of undefined

 <div class="plugin" data-plugin="true"></div>

   <script>window.jQuery || document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"><\/script>')</script>
 <script>
         ;(function($){
     var namespace = 'plugin';

     function Plugin(element,options){
       this.settings = options;
       this.version = '0.0.1';
       this.$element = element;
       this.init();
     }

     Plugin.prototype.formatString = function(key,val){
       return this.$element.find('ul').append('<li><strong>' + key.toUpperCase() + ':</strong> ' + val + '</li>');
     };

     Plugin.prototype.printSettings = function(){
       this.$element.append('<ul>');

       $.each(this.settings, this.formatString);
     };

     Plugin.prototype.init = function(){
       this.printSettings();
     };

     $('.plugin').each(function(key,val){
       if (!$(this).data[namespace]) $(this).data[namespace] = new Plugin($(this),$(this).data());
     });
   })(window.jQuery);
     </script>

this.$element.find('ul') seems to be the code causing the error. I have tried to add empty <ul></ul> tags to the empty div but that didn't do anything. I feel the .find is not deprecated and it looks like i formatted this correctly but i bet that i am wrong.

Answer 1

// Comments - jquery doesn't need to use find in this instance. I think the div with plugin class was just sitting there on the page and a simple reference was all that was needed.

So to be honest i could use some help onto why this worked and the correct terminology as to why so i can educate my self better and not ask such dumb questions.

In the end i ended up removing .find since jQuery doesnt need it for this instance. element was defined so i knew something wasn't getting outputted to the div. I ended up playing around and got the errors to a point where i could investigate things further using Google Chrome.

Now i am simply taking this element which is the div class plugin and appending the options as a list into it. this is done with the additional line return this.$element;

Please let me know if that is a good explanation or not. If you can add to my education here i would appreciate it.

Plugin.prototype.formatString = function (key, val) {
    this.$element = $(".plugin").append('<li><strong>' + key.toUpperCase() + ':</strong> ' + val + '</li>');
    return this.$element;
}