imagefolderという名前のフォルダに画像ファイルがあります。ファイル名はnumber_of_suit.png（7_of_diamond.pngなど）の形式であり、HTMLボディに追加したいと思います。私は構文の問題があると思う。バニラジャズの例。Javascriptを使用してDOMに画像要素を追加します。
var addImage = document.getElementsByTagName("body");
addImage.appendChild(img src = "imagefolder/ + number + "_of_" + suit.png");
ありがとう。
基本
。開始するには、document.getElementsByTagNameはNodeListで、Nodeではなく、appendChild要素が返されます。その周りを取得するには、いずれかのそのコレクションの最初の項目を取得し、または単にdocument.bodyを取得するには：
var addImage = document.getElementsByTagName("body"); // NodeList
var bodyOne = addImage[0]; // <body> element
var bodyTwo = document.body; // <body> element
を第二に、あなたはあなたの例では構文の強調表示を見れば、あなたが引用のカップルを逃していることがわかりますマーク。
var string = "imagefolder/" + number + "_of_" + suit + ".png";
GottZが指摘したように、あなたがしているように最後に、あなただけのimg srcを参照することはできません。 img要素を作成し、srcプロパティを設定する必要があります。
var img = document.createElement("img");
img.src = string;
より高度な
あなたはすでにこれを処理している可能性が、我々だけを見て、あなたのコードの少量を持っていますが、ジャストインケース：あなたはDOMが完了するまで待機する必要が変更する前にロードしてください。これは、DOMContentLoadedイベントが発生するのを待つことで最も効果的です。
document.addEventListener("DOMContentLoaded", function() {
// Your work here.
});
あなたは52個の要素を作成することになるだろうので、DocumentFragmentを作成し、その後身体にフラグメントを追加し、それにすべてのあなたの新しい要素を追加する方が効率的でしょう。これによりブラウザの再塗装が少なくなりますので、しばしばはるかに高速です。
var fragment = document.createDocumentFragment();
// ...
fragment.appendChild(img);
// ...
document.body.appendChild(fragment);
を総括全体のことは、あなたのコードは、おそらく次のようになります意味：
document.addEventListener("DOMContentLoaded", function() {
"use strict";
var numbers = [2, 3, 4, 5, 6, 7, 8, 9, 10, "Jack", "Queen", "king", "Ace"];
var suits = ["Clubs", "Diamonds", "Hearts", "Spades"];
var fragment = document.createDocumentFragment();
suits.forEach(function (suit) {
numbers.forEach(function (number) {
var img = document.createElement("img");
img.src = "imagefolder/" + number + "_of_" + suit + ".png";
fragment.appendChild(img);
});
});
document.body.appendChild(fragment);
});
私はそれが役に立てば幸い。
私は答えを書いたときに急いでいました。あなたは確かにいくつかの努力を反映しています：D – GottZ
そのような詳細な答えに感謝しています... –
これはあなたの体に画像を追加することができる方法である。
document.body.appendChild(document.createElement("img")).src = "imagefolder/" + number + "_of_suit.png";
これが機能するためにあなたは体が描かれた後にスクリプトが実行されることを確認する必要があります。あなたが問題のカップルを持っている
回答があれば記入してください。 –