jQuery プラグインの作成方法

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.fn.extend({
 
    add_button : function(option){
 
        var input = $("<input type='button'>")
            .insertAfter($(this))
        ;
 
        if ( typeof option.val !==  'undefined' ) {
            input.val( option.val );
        }
        if ( typeof option.click !==  'undefined' ) {
            input.on("click", option.click );
        }
        if ( typeof option.id !==  'undefined' ) {
            input.prop("id", option.id);
        }
        if ( typeof option.class !==  'undefined' ) {
            input.addClass(option.class);
        }
        if ( typeof option.css !==  'undefined' ) {
            input.css( option.css );
        }
        return $(this);
 
    }
 
});
 
$(function(){
 
    $("#target").add_button({
        "val": "ボタン",
        "click" : function(){
            alert("クリックされました")
        },
        "id" : "btn"
 
    });
 
});
</script>
 
</head>
<body>
 
<span id="target">この後ろにボタン</span>
 
</body>
</html>

リアルタイムHTML で実行しながら作成します

1) テキストエリアにカーソルを置いて jQuery ボタン
2) 改行して SCRIPT ボタン
3) SCRIPT 要素内にカーソルを置いて onload ボタン




プラグイン部分を追加します

<script>
$.fn.extend({
	add_button : function(option){
		var input = $("<input type='button'>").insertAfter($(this));
		return $(this);
	}
});

$(function(){});
</script>


対象 HTML を追加します

<span id="target">この後ろにボタン</span>


プラグイン実行部分を追加します

$(function(){

	$("#target").add_button({
		"val": "ボタン",
		"click" : function(){
			alert("クリックされました")
		},
		"id" : "btn"

	});

});