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; 
 
     
 
    } 
 
}

私は最初、それに異なる画像のURLを割り当てることによって、そのカード作るコードを追加すること、それにIDを割り当て、次に要素を作成することにより、ループ、すなわち2（ここ）にユーザ入力にカードを作成しようとしてい

Answer 1

appendの内容はすべて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();