javascript - スクリプト内に画像を追加する

Question

スクリプト内から画像を追加する方法があるかどうか疑問に思っていました。たとえば、これを行う理由は、ユーザーがクリックするたびに画像を追加できるようにするためです。Body に大量の画像を追加し、それらをすべて非表示にして、誰かがクリックしたときに 1 つずつ表示することもできますが、もっと良い方法があるようです。（あなたがそれを理解していない場合のために、私はJavaScriptに非常に慣れていません）:)。

Answer 1

写真を動的に追加するには、次のようなコードを使用します。

<div id="holder"></div>

<script type="text/javascript">
var img = new Image();
img.src = 'path/to/image.jpg';
var holder = document.getElementById('holder');
holder.appendChild(img);
</script>

Imageオブジェクトは要素に対応します<img>。Image(aka HTMLImageElement) オブジェクトの詳細については、こちらを参照してください。appendChildメソッドの詳細については、こちらを参照してください。

Answer 2

次の手順に従ってください。

1. 画像を追加する html 内の要素を選択します。例：<div id='maker'></div>
2. HTMLのボタンにイベントを追加します。例：<button onclick='addImg()'>Add</button>

3. 次に、これらのコードをスクリプト タグまたは .js ファイルに書き込みます。コードは次のとおりです。

   function addImg()
   {
      var maker = document.getElementById('maker');
       var image = document.createElement('img');
       image.src = '/image/path/with/extension.jpg';
       maker.appendChild(image);
   }