template literals

template-literals.js

// The plain old way:
'<div class="' + className + '">' +
  '<p>' + content + '</p>' +
  '<a href="' + link + '">Let\'s go</a>'
'</div>';

// With ECMAScript 6:
`
<div class="${className}">
  <p>${content}</p>
  <a href="${link}">Let's go</a>
</div>
`

/* 
Your string can span multiple lines.
You don't have to escape quotation characters.
You can avoid groupings like: '">'
You don't have to use the plus operato
*/

let nuts = 7
more.innerHTML = `
  <h2>You collected ${nuts} nuts so far!
  <hr>
  Double it, get ${nuts + nuts} nuts!!
`
<div id="more"></div>