title: javascript function return text to html
body: <p>I found the following code snippet and am looking for some clarification on how it works, because it solves what I'm hoping to do. The variable 'html' is a string, which is returned form the function showCard, and is placed into the HTML code as a div. I'm able to replicate this however the string output is returned and starts with: "..." so the div isn't created, the string is simply moved into my HTML because the quotes remain outside the div.</p>
  
  <pre><code>function Card(suit, val, name, symbol)
  {
          this.suit = suit;
          this.val = val;
          this.name = name;
          this.symbol = symbol;
  
      this.showCard =function showCard()
      {
          var html="";
          switch(this.suit)
          {
              case "hearts": suit_text = "&amp;hearts;";
              break;
              case "diamonds": suit_text = "&amp;diams;";
              break;
              case "spades": suit_text = "&amp;spades;";
              break;
              case "clubs": suit_text = "&amp;clubs;";
              break;
          }
          html="&lt;div class='card " + this.suit + "'&gt;&lt;div class='card-value'&gt;" + this.symbol + "&lt;/div&gt;&lt;div class='suit'&gt;" + suit_text + "&lt;/div&gt;&lt;div class='main-number'&gt;"+this.symbol +"&lt;/div&gt;&lt;div class='invert card-value'&gt;"+this.symbol+"&lt;/div&gt;&lt;div class='invert suit'&gt;"+suit_text+"&lt;/div&gt;&lt;/div&gt;";
          return html;
      }
  }
  </code></pre>