.append()で<a href="".....><img src=""...>を付け加える

こんな基礎中の基礎のことでも結構躓いてしまったため、これもメモメモ。

jQueryでとあるwebAPIを使って、複数の画像を取得して表示する。といったことを動的にやりたい。
その際に、取得した画像を<a href="".....><img src=""...>のリンク付き画像を表示したいので、.appendを使います。

// 空の<div>を作る
var $div = $("<div>");

var $item = $("<div>", {"class": "cover-art__item",})
.append($("<a>", {
　　　href: "sample.html",})
.append($("<img>", {
　　　src: "sample.jpg",
　　　width: 180,
　　　height: 180,
　}))
);

// $divを#mainに追加する
$div.appendTo(".XXXX");

ポイント

ハマってしまったのがカッコのくくり方です。ご注意を
.append( $("<a>",{ herf:XXX, })「)←ここにいれない」
.append($("<img>", {src: XXX}))「)←ここ」