js: please explain this variable value with 5 double quotations

Question

Please, take a brief look at the code below:

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul class="recommended">');
 var i;
 var j;
 for (i = 0; i < json.feed.entry.length; i++)
 {
  for (j = 0; j < json.feed.entry[i].link.length; j++) {
   if (json.feed.entry[i].link[j].rel == 'alternate') {
    break;
   }
  }
var postUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var postTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ postUrl + '" target="_blank">' + postTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="https://xxxxxxxxxx.blogspot.com/feeds/posts/summary/-/recommended?max-results=3&alt=json-in-script&callback=recentpostslist"></script>

Background info

I found this somewhere on the Internet yesterday, and have been trying to modify it a bit, since.

Variables i and j were originally declared within the for loop, as in...

for (var i = 0; i < json.feed.entry.length; i++)
{
 for (var j = 0; j < json.feed.entry[i].link.length; j++) {
  if (json.feed.entry[i].link[j].rel == 'alternate') {
   break;
  }
 }

...

...but after doing a bit of (beginners') reading on w3schools.com, I got the impression that they're recommending keeping the variables declaration outside the for loop. My programming skills are scant, at their very best, so truth be told, I have no idea whether my impression was right.

Then I assigned a class to the <ul> element at the beginning (3rd line).

So far, so good. I checked, and the script was still working.

What it does is list the titles of a blog's 3 latest posts that have been labeled "recommended".

Then I made an attempt to assign a class to the <li> element that's declared as a... ehm... part of the value (have I understood that right?) of the item variable on line 15:

var item = "<li>" + "<a href="+ postUrl + '" target="_blank">' + postTitle + "</a> </li>";

But that seems to invalidate the code, which came as no surprise, really, since it did seem like a bit of a long shot.

My question

When taking a closer look at this line of code, however, I must say I was quite baffled by all the quotation marks (single and double).

It would be greatly appreciated if someone could explain
"<a href="+ postUrl + '" target="_blank">'
Why are there 5 double quotations in total? Is it incorrect?
What function does '" target="_blank">' serve?

Answer 1

You're using JS to create the string <a href="some-url.html" target="_blank">

All of the quotes are necessary because you're using quotes in JS to define a string literal, but also outputting quotes in the string itself - thus, the use of single quotes around double quotes. '"' in JS creates the string ".

target="_blank" is an HTML attribute that says the target window the hyperlink opens in should be called _blank, aka, a new window.

Answer 2

The "<a href="+ postUrl + '" target="_blank">' as a whole statement is used to dynamically build an anchor tag <a> by reading the postUrl from the feeds json, and then append this <a> tag to your html.

The first two " quotes are used to define a string literal containing the first segment of the <a> tag, while the last two " are to contain the value of the target attribute which will be shown on the final HTML, the one in the middle (the 3rd in order) is used to close the href attribute when viewed on your HTML.

This way the rendered HTML will be as following:

<a href="http://the_postUrl_value_from_feed" target="_blank">

BTW, the statement you're using is wrong, it is missing the starting " quote of the href attribute, try updating it to be as following:

'<a href="' + postUrl + '" target="_blank">'