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);You need to wrap text with quotes.
This works for me:
marker.innerHTML = "<div data-tooltip=\"" + text+ "\">⚠️</div>";
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);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);