keep apostrophes when passing string value in Innerhtml

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 (&quot; or &apos;).


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

Leave a Reply