jQueryで新しいimgタグを作成する方法｜srcやidなどの属性指定の手順

JavaScriptで新しいimgタグ（画像要素）を動的に作成したい場合、jQueryを使うと非常に簡単です。ここでは、代表的な2つの作成方法をわかりやすく解説します。

HTML文字列を渡してimgタグを作成する基本の方法

最もシンプルなのは、$()関数にHTML文字列を渡す方法です。まずimg要素を生成し、その後attr()メソッドを使ってsrc属性を設定します。

var myImg = $('');

$(document.createElement(myImg));
myImg.attr('src', responseObject.imgurl);

この例では、idが「dynamic」のimg要素を作成し、サーバーから取得したレスポンスオブジェクト（responseObject）に含まれる画像URLをsrc属性に割り当てています。Ajax通信などで受け取った画像パスを動的に表示したい場合に役立つテクニックです。

属性をオブジェクトで一括指定する簡潔な方法

もう少しスマートな書き方として、$()関数の第2引数にオブジェクト形式で属性を渡す方法があります。src、id、altなどの属性を一度にまとめて指定できるため、コードの可読性が大きく向上します。

var myImg = $('', {
    id: 'id1',
    src: 'exampleimg.png',
    alt: 'Alt text'
});

この方法なら、複数の属性を持つimg要素をたった1つのステートメントで生成できます。作成した要素は、append()やappendTo()などのメソッドでDOMに追加することで、実際にページ上へ表示されます。

使い分けのポイント

単純に要素だけ作り後から属性を設定するなら前者の方法、最初から属性をすべて決めておける場合は後者のオブジェクト指定方式がおすすめです。状況に応じて使い分けることで、より保守しやすいコードになります。