createElement('img')にaやpを一緒に付与しforで回数指定

実現したいこと

１
createElement('img')で生成したimgにaタグやpタグを一緒に生成したい。
完成イメージはyoutubeホームのサムネイル部分。

２
createElement('img')をfor文で２０回の指定をして表示をしたい。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <script type="text/javascript" src="index.js"></script>
6  </head>
7  <body>
8    <div id="demo">
9    </div>
10  </body>
11  </html>

javascript
1   window.onload = function (){
2        var img = document.createElement('img');
3                  img.src = "img/sample.jpg";
4                  img.onclick = video;
5　　　　var p    = document.createElement('p');
6                  p.innerHTML = 'test';
7        for(var i = 0 ; i < 20 ; i++){
8                        document.getElementById('demo').appendChild(img,p)[i]
9   }};
10   function video(){
11        alert('test');
12   }

for文やappendChildなどの使い方の理解が浅い為、ご教授くださいましたら幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

appendChildする際に、同じモノを複数回appendChildしようとすると無視されちゃうみたいです。
なので、都度 createElementしてあげるとうまく行きます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <div id="demo">
    </div>

    <script>
        window.onload = function (){
            for(var i = 0 ; i < 20 ; i++){
                var img = document.createElement('img');
                      img.src = "img/sample.jpg";
                      img.onclick = video;
                var p   = document.createElement('p');
                       p.innerHTML = 'test';

                document.getElementById('demo').appendChild(img,p);
            }};
        function video(){
                alert('test');
        }
    </script>
  </body>
  </html>

投稿2020/08/23 12:22