How to pass string parameter in innerhtml

Issue

I am creating dynamic html base server response.

Example:

var responseServer = {
name: "al the' too"
}

var htmlView = `<div onclick="info(responseServer.name)"> </div>`; 
//Error: al identifier is not defined. 

var htmlView = `<div onclick="info('responseServer.name')"> </div>`; 
//Error: Uncaught SyntaxError: missing ) after argument list

After construction html i am getting following code :

function info(name){
	alert(name);
}

<div>
<button onclick="info('al al'the ra)">
  Test
</button>
</div>

Solution

I got workaround as follow:

function info(name){
	alert(atob(name));
}

var sName = "al al'the ra";

var myHtml = document.getElementById("one");
myHtml.insertAdjacentHTML('beforeend', "<button onclick=info(btoa(sName))> Test </button>");

<div id="one"></div>

This is not actual build and runtime environment. I have use this work around in ionic 3 with angular.

Answered By - Khurshid Ansari