Node.src = variableName/innerHTMLと変数の問題を伴うHTMLイメージの追加

Question

私はいくつかのイメージを "変数"として配列に保存し、それらを含むdivのinnerHtmlを編集することで "画像が表示されません。私はimg.src = varNameを使用しています。コードへのリンク：https://repl.it/GBoa/1（ここでは、画像がアップロードされたウェブサイトのバージョン：cardtestwdi.bitballoon.comへのリンクです）。私が得ることができるすべての助けに感謝します。

Answer 1

文字列を使用してinnerHTMLを設定する場合は、完全なHTML文字列を指定する必要があります。文字列を作成してから、通常のDOMノードのプロパティを使用することはできません。たとえば、次のように使用できます。

var imgElement = "<img src='" + myArray[i] + "' alt='test' width='200px' height='275px'/>"; 

しかし代わりにこれをやって、私はdocument.createElementを使用してJavaScriptでノードを作成することはお勧めしてdocument.appendChildを使用してDOMに追加します：

var imgElement = document.createElement('img'); 
imgElement.width = 200; 
imgElement.height = 275; 
imgElement.src = myArray[i]; 
myCard[i].appendChild(imgElement); // Append the image node to the card node