keep apostrophes when passing string value in Innerhtml

Question

The text value holds string text with double quotes and apostrophes as you see in the example. when I print the result it changes to different characters.

The text that is coming from API is :

"mismatched input 'STARTt' expecting 'START' ";

but when I print it, it goes :

"mismatched" input="" 'startt'="" expecting="" 'start'=""

I would like to print the string exactly how is stored

  
  var marker = document.createElement("div");
  
  var text = "mismatched input 'STARTt' expecting 'START' ";
  
  marker.innerHTML = "<div data-tooltip=" + text+ ">⚠️</div>";



console.log(marker.innerHTML);

Answer 1

Attribute values containing spaces have to be delimited with " or '.

Attribute values containing ' have to be delimited with "

Attribute values containing " have to be delimited with '.

Attribute values containing " and ' have to be delimited with one of those while the other has to be replaced with the appropriate entity (" or ').

---

Trying to generate HTML by mashing strings together is asking for trouble when you hit any kind of escaping requirements.

Don't do it. Use DOM methods instead.

const marker = document.createElement("div");
const text = "mismatched input 'STARTt' expecting 'START' ";
const child = document.createElement('div');
child.setAttribute('data-tooltip', text);
child.innerText = "??";
marker.appendChild(child);
console.log(marker.innerHTML);

Answer 2

You need to wrap text with quotes.

This works for me:

marker.innerHTML = "<div data-tooltip=\"" + text+ "\">??</div>";

Answer 3

Use a template string. It should solve the problem

  var marker = document.createElement("div");
  
  var text = `mismatched input 'STARTt' expecting 'START' `;
  
  marker.innerHTML = `<div data-tooltip=" + text+ ">??</div>`;



console.log(marker.innerHTML);