Text string output stops after first space

Question

I was tasked with creating a new ADA compliant website for my school district's technology helpdesk. I started with minimal knowledge of HTML and have been teaching myself through w3cschools. So here's my ordeal:

I need to create a page for all of our pdf and html guides. I'm trying to create a somewhat interactable menu that is very simple and will populate a link array from an onclick event, but the title="" text attribute drops everything after the first space and I've unsuccessfully tried using a replace() method since it's coming from an array and not static text.

I know I'm probably supposed to use an example, but my work day is coming to a close soon and I wanted to get this posted so I just copied a bit of my actual code.

So here's what's happening, in example 1 of var gmaildocAlt the tooltip will drop everything after Google, but will show the entire string properly with example 2. I was hoping to create a form input for the other helpdesk personnel to add links without knowing how to code, but was unable to resolve the issue of example 1 with a

var fix = gmaildocAlt.replace(/ /g, "&nb sp;") 

//minus the space

//this also happens to break the entire function if I set it below the rest of the other variables

I'm sure there are a vast number of things I'm doing wrong, but I would really appreciate the smallest tip to make my tooltip display properly without requiring a replace method.

//  GMAIL----------------------------
function gmailArray() {
  var gmaildocLink = ['link1', 'link2'];
  var gmaildocTitle = ["title1", "title2"];
  var gmaildocAlt = ["Google Cheat Sheet For Gmail", "Google 10-Minute Training For Gmail"];
  var gmailvidLink = [];
  var gmailvidTitle = [];
  var gmailvidAlt = [];
  if (document.getElementById("gmailList").innerHTML == "") {
    for (i = 0; i < gmaildocTitle.length; i++) {
      arrayGmail = "<a href=" + gmaildocLink[i] + " " + "title=" + gmaildocAlt[i] + ">" + gmaildocTitle[i] + "</a>" + "<br>";
      document.getElementById("gmailList").innerHTML += arrayGmail;
    }
    for (i = 0; i < gmailvidTitle.length; i++) {
      arrayGmail1 = "";
      document.getElementById("").innerHTML += arrayGmail1;
    }
  } else {
    document.getElementById("gmailList").innerHTML = "";
  }
}

<div class="fixed1">
  <p id="gmail" onclick="gmailArray()" class="gl">Gmail</p>
  <ul id="gmailList"></ul>
  <p id="calendar" onclick="calendarArray()" class="gl">Calendar</p>
  <ul id="calendarList"></ul>
</div>

Answer 1

Building HTML manually with strings can cause issues like this. It's better to build them one step at a time, and let the framework handle quoting and special characters - if you're using jQuery, it could be:

var $link = jQuery("<a></a>")
    .attr("href", gmaildocLink[i])
    .attr("title", gmaildocAlt[i])
    .html(gmaildocTitle[i]);
jQuery("#gmailList").append($link).append("<br>");

Without jQuery, something like:

var link = document.createElement("a");
link.setAttribute("href", gmaildocLink[i]);
link.setAttribute("title", gmaildocAlt[i]);
link.innerHTML = gmaildocTitle[i];
document.getElementById("gmailList").innerHTML += link.outerHTML + "<br>";

If it matters to your audience, setAttribute doesn't work in IE7, and you have to access the attributes as properties of the element: link.href = "something";.