Javascript 〜document.createElement('')で作った要素に属性を付与する方法〜
今回はjs操作でimgタグを作るやり方を以下に
let img = document.createElement('img');
img.className =`card spade sapde${i} ${i}`;
img.id = '';
img.onclick =clickFunc;
１。let img document.createElement('img')
で空のimgタグを生成
２。img.className = 「''」の中につけたいクラス名を記述
スペース区切りで記入すると複数のクラスが設定できる
今回であれば「card, spade, spade1, 1（iが1だった場合）」が生成される
例文では「``」を使用したテンプレートリテラルを使っている（for文のiがあるため）が、基本は「''」を使用する。
３。img.id =「''」の中につけたいid名を記述
idはクラスと違い１つしか設定できない（idだから）
４。img.onclick =関数名
これを設定するとこの生成したimgタグをクリックした際に設定した関数処理が行われるようになる
//クリックイベントここからーーーーーーーーーーーーーーーーーーーーーーーーー
function clickFunc(event) {
//引数のeventは引数（以下で記述した内容の値を受け取る。上記スペードとハートでonclickで
//clickFuncを行うようにしているから今回の関数（function）がクリックイベントになっている。
let data = event.target.className;
//dataという変数に引数eventの受け取った値に対し、それに含まれるクラスを取得する。
//QQQQQQQQQ ここのtargetとはjsに元からあるあたいなのだろうか、、、QQQQQQ
let cardData = data.split(' ');
//let dataで取得した文字列のクラス属性を配列に変換している
console.log('event', event);
//クリックして得た値（event)のsrcElementのsrc属性を＝右記の内容に更新している（書き換えている）
//これによりクリック後src属性が変わり数字の面が表示される
}
その他。
event.srcElement.src = images ~~~~
これはこの関数（clickFunc)を実行した際にクリックしたimgタグのsrcElementの中のsrc属性を取得し、クリックした時に＝の右側に記述した内容に変更する（入れ替え挿入）する内容が記述されている
このような方法で要素はタグに追加できる
今回はimgタグを生成したが、imgをdivにすればdivタグに同じように要素を入れることもできる
