【jquery】属性付きのHTML要素（DOM要素）を生成する方法｜プロサバメモ

WEBプログラミングやサーバ設定などのメモ場

【jquery】属性付きのHTML要素（DOM要素）を生成する方法

2022.03.26

HTML要素を生成する際に、第2引数としてオブジェクトを渡すと、そのオブジェクトのプロパティがHTML属性として設定されます。

属性以外にも、イベントタイプ、val、css、html、text、date、width、height、offsetなどのjqueryメソッドも指定できます。

下のサンプルは、styleやクリックイベント付きのdivを作成して、その作成されたdiv要素をidがaddの要素に挿入しています。

jquery

<script>
    jQuery( function( $ ) {
        $('<div></div>', {
            text: 'クリックするとアラートが表示されます',
            style: 'color:red;',
            on: {
                click: function(event) {
                    alert("アラート");
                }
            }
        } )
        .appendTo('#add');
    } );
</script>

HTML