javascript - 如何使用javascript动态附加卡？

Question

function a()
{ 
   var a1 = "<div class=w3-container><div class=w3-card-4 w3-dark-grey style=width:25%><div class=w3-container w3-center><p>video</p><img src= ";
  var a = [ " https://image.ibb.co/cE0COF/java_mini_logo.jpg ",
       " https://preview.ibb.co/jaNQdF/marguerite_daisy_beautiful_beauty.jpg"];
  var a2= " alt=sir pic style=width:80%><p>John Doe</p></div></div></div>";
  
  var g; 
  for(var i=0;i<2;i++)
    { g= document.createElement('div');
        g.id = i;
     var abc = a1+a[i]+a2;
     document.getElementById(g.id).innerHTML=abc;
     
    }  
}

我试图在循环中的用户输入上制作卡片，即 2(此处)，首先创建元素，然后为其分配 id，然后添加代码，通过为其分配不同的图像 url 来使其成为卡片

Answer 1

您忘记将每个 div 的附加内容到body。

您可以使用 appendChild 方法来执行此操作。

function a()
{ 
   var a1 = "<div class=w3-container><div class=w3-card-4 w3-dark-grey style=width:25%><div class=w3-container w3-center><p>video</p><img src= ";
  var a = [ " https://image.ibb.co/cE0COF/java_mini_logo.jpg ",
       " https://preview.ibb.co/jaNQdF/marguerite_daisy_beautiful_beauty.jpg"];
  var a2= " alt=sir pic style=width:80%><p>John Doe</p></div></div></div>";
  
  var g; 
  for(var i=0;i<2;i++)
  { 
      g= document.createElement('div');
      g.id = i;
      document.body.appendChild(g);
      var abc = a1+a[i]+a2;
      document.getElementById(g.id).innerHTML=abc;         
    }  
}
a();