How to write a custom jQuery plugin?

To create a jQuery plugin, first create a file named jquery-demoplugin.js with the following code. This is our plugin code. Here, demoplugin is the name of our plugin. You can add any name to your custom plugin −

(function ( $ ) {
   $.fn.demoplugin = function( options ) {
      var web = $.extend({
         name: 'example'
      }, options );
      return this.append('Website: ' + + '.com');
}( jQuery ));

Now, to load it, add to the HTML file, new.html

<script src=""></script>
<script src="jquery-demoplugin.js"></script>
   $( document ).ready(function() {
      $( '#content ).demoplugin();
<div id="content"></div>

Updated on: 12-Jun-2020


Kickstart Your Career

Get certified by completing the course

Get Started