var container = document.querySelector(".container");
for (var i=0; i<tweets.length; i += 1) {
var name = ' <h4 class="card-title">';
name += tweets[i].name;
name += '</h4> </div>';
var tweet = '<div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">'
tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";
var photo ='<div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">'
photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';
container.innerHTML+='<div class="card"><div class="card-header">'+
photo+name+tweet+'</div></div>';
}
//the div in html
<div class="container">
<div class="card">
<div class="card-header">
<div class="row">
<div id="photo">
<!-- here where the pic goes ! -->
</div>
<div id="name">
<!-- here where the name goes ! -->
</div>
</div>
<div class="card-block row">
<div id="tweet">
<!-- here where the tweet goes ! -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-block row">
<div id="tweet"> </div>
</div>