keep apostrophes when passing string value in Innerhtml

May 13, 2022

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);

>Solution :

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);