Expected expression, got keyword 'if'

Question

Loop html code as a string and concatenate to div. but i have an issue on concatenating as a string. I got a error as Expected expression, got keyword 'if'

 for (var i = 0; i < response.data.products.edges.length; i++) {

    tar1='<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 coll_bor1 fade_in"><div class="coll_bor col_blur"><div><center><a href="'+response.data.products.edges[i].node.onlineStoreUrl+'" style="text-decoration: none;"><img src="'+response.data.products.edges[i].node.images.edges[0].node.originalSrc+'"/></a></center></div><div style="height:25px;"><p itemprop="brand" class="ven"><a href="/collections/vendors?q='+escape(response.data.products.edges[i].node.vendor)+'"></p></div><a style="text-decoration: none;color:black;" href="'+response.data.products.edges[i].node.onlineStoreUrl+'"> <div class="item_title"><p class="it_tit" style="text-transform: uppercase;">'+(response.data.products.edges[i].node.title).substring(0,45)+'...'+'</p><p class="it_tit1" style="text-transform: uppercase;">'+(response.data.products.edges[i].node.title).substring(0,25)+'...'+'</p></div></a><div class="quotes"><div class="row"><div class="com_prc col-xs-12" style="padding-left:15px;padding-right:0px;">'+
    if(response.data.products.edges[i].node.variants.edges.length>1){ 
     +'<p class="price pc1">₹&nbsp;'+(parseInt(response.data.products.edges[i].node.priceRange.minVariantPrice.amount))+'&nbsp;</p><p class="price pc2"> to ₹ '+(parseInt(response.data.products.edges[i].node.priceRange.maxVariantPrice.amount))+'&nbsp;&nbsp;</p>'+
    } 
    else 
    {
+'<p class="price pc1">₹&nbsp;'+response.data.products.edges[i].node.variants.edges[0].node.price;+'&nbsp;&nbsp;</p><p class="comprice pc2"><del>₹ '+response.data.products.edges[i].node.variants.edges[0].node.compareAtPrice;+'</del>&nbsp;&nbsp;</p>'+
    } 
+'<br></div></div><div class="row"><div class="col-md-12">'+
    if(response.data.products.edges[i].node.variants.edges.length>1) 
    { 
        var percent = new Array(); 
        for(var j=0;j<response.data.products.edges[i].node.variants.edges.length;j++) 
        { 
            var per=((((response.data.products.edges[i].node.variants.edges[j].node.compareAtPrice)-(response.data.products.edges[i].node.variants.edges[j].node.price))*100)/(response.data.products.edges[i].node.variants.edges[j].node.compareAtPrice));
            var per1=per.toFixed(1);
            var percentage=Math.round(per1);
            percent.push(percentage); 
        } 
        var y=Math.max(...percent); 
        var max_percent = y.toString();
        +'<p class="new_per">UPTO '+max_percent+' % OFF</p>'+
     } 
     else 
     { 
        var per=((((response.data.products.edges[i].node.variants.edges[0].node.compareAtPrice)-(response.data.products.edges[i].node.variants.edges[0].node.price))*100)/(response.data.products.edges[i].node.variants.edges[0].node.compareAtPrice)); 
        var per1=per.toFixed(1); 
        var percentage=Math.round(per1); 
        +'<p class="new_per">'+percentage+'% OFF</p>'+
     } 
        +' <br></div></div></div></div></div>';
  }
//Concatenate Here
document.getElementById("mydiv").innerHTML+=tar1;