<!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" }); });