CODEWITHSUNDEEP
javascripthtmldomdynamic
Simranjeet Singh
Simranjeet Singh

Reputation: 69

how to append card dynamically using javascript?

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

i am trying to make cards on user input in loop i.e 2(here) by first creating element then assigning id to it then adding code that make it card by assigning different image urls to it

Upvotes: 0

Views: 6992

Answers (1)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48407

You forgot to append content of every div to body.

You can do this using appendChild method.

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();

Upvotes: 1

Related Questions