Element goes out of the element in JS

I have a very strange problem that I never seen before. Please check my code below and guide me where I am wrong.

Actually the problem is I put a name inside the anchor tag and when I load the page it appears out of the anchor tag.

Code

   html += "<h6>";
   html += "<a href=" + val.destination_url + ">" + val.product_name + "</a>";
   html += "</h6>";

Output

html += "<h6>";
html += "<a href="" + val.destination_url + "">" + val.product_name + "</a>";
html += "</h6>";

html += "<h6>";
html += `<a href="${val.destination_url}">${val.product_name}</a>`;
html += "</h6>";