How to convert html to variable in javascript?

Question

I have problem while convert html to javascript variable.

My HTML Code

<div onclick="openfullanswer('2','Discription part','This is the code part');">

I want to create this html code dynamically, but I have the problem in quote(" and ')

I tried like below

for(i=0;i<result.length;i++)
{       
        strVar +="<div onclick='openfullanswer("+result[i].ReplyID+",'"+result[i].Description+"','"+result[i].Code+"');'>Test code</div>";
}

https://jsfiddle.net/8782n60z/1/

Rahul Patel · Accepted Answer · 2016-09-24T08:41:01.863

Way 1: You should have to change the sequence of single and double quotes and have to escape the single quotes with '\' in on-click function arguments

Please check the below snippet for more understanding.

var result=[];
var obj=new Object();
obj.ReplyID=1;
obj.Description="This is my description";
obj.Code="This is my Code Part";

result.push(obj);



strVar="";
for(i=0;i<result.length;i++)
{       
  strVar +='<div onclick="openfullanswer(\''+result[i].ReplyID+'\',\''+result[i].Description+'\',\''+result[i].Code+'\');">Test code</div>';
}

document.getElementById("test").innerHTML=strVar;


function openfullanswer(replyid,desc,code)
{
  alert("success");

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">

</div>

Way 2: Don't change the sequence of quotes. Only change the onclick event declaration quotes from signle to double and escape double quotes with '\' and you need not have to change anything.

Please check the below snippet for more understanding.

var result=[];
var obj=new Object();
obj.ReplyID=1;
obj.Description="This is my description";
obj.Code="This is my Code Part";

result.push(obj);


strVar="";
for(i=0;i<result.length;i++)
{       
    strVar +="<div onclick=\"openfullanswer("+result[i].ReplyID+",'"+result[i].Description+"','"+result[i].Code+"');\">Test code</div>";
}

document.getElementById("test").innerHTML=strVar;


function openfullanswer(replyid,desc,code)
{
alert("success");

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">

</div>

sss · Answer 2 · 2016-09-24T08:30:39.443

1

strVar +="<div onclick=\"openfullanswer('"+result[i].ReplyID+"','"+result[i].Description+"','"+result[i].Code+"');\">Test code</div>";

try this.

edited Sep 24 '16 at 08:30

answered Sep 24 '16 at 08:24

sss

11
2

2

can you explain more please your answer? – Youcef LAIDANI Sep 24 '16 at 08:33

score 1 · Answer 3 · edited May 23 '17 at 10:34

The code you wrote produces the following:

<div onclick='openfullanswer(1,'This is my description','This is my Code Part');'>Test code</div>

The above is not valid since there are single quotes inside the value of onclick.

You will need to escape these characters.

strVar +="<div onclick=\"window.openfullanswer("+result[i].ReplyID+",'"+result[i].Description+"','"+result[i].Code+"');\">Test code</div>";

See here an article in SO explaining this matter in detail.

See a working demo here: https://jsfiddle.net/8782n60z/3/

P.S. I changed a bit the way to declare and call the function because it gave an error.

K Can you please give me more explanation about escape character — Merbin Jo, Sep 24 '16 at 09:23

score 1 · Answer 4 · answered Sep 24 '16 at 09:24

You can use template literal

var result = [];
var obj = new Object();
obj.ReplyID = 1;
obj.Description = "This is my description";
obj.Code = "This is my Code Part";

result.push(obj);

strVar = "";
for (i = 0; i < result.length; i++) {
  strVar += `<div 
               onclick="openfullanswer('${result[i].ReplyID}'
                                       , '${result[i].Description}'
                                       , '${result[i].Code}');">
               Test code
             </div>`;
}

function openfullanswer(replyid, desc, code) {
  alert("success");
  console.log(replyid, desc, code);
}

document.getElementById("test").innerHTML = strVar;

<div id="test">

</div>

jsfiddle https://jsfiddle.net/8782n60z/5/

score 0 · Answer 5 · answered Sep 24 '16 at 08:53

0

Instead of building the string you could also use document.createElement to generate your div. And then append it to the parent #test

var result=[];
var obj=new Object();
obj.ReplyID=1;
obj.Description="This is my description";
obj.Code="This is my Code Part";

result.push(obj);

var div;
for(i=0;i<result.length;i++)
{       
  div = document.createElement('div');
  div.innerHTML = 'Test code'
  div.onclick = openfullanswer;
}
document.getElementById("test").appendChild(div);

function openfullanswer(replyid,desc,code)
{
  alert("success");
}

<div id="test">

</div>

answered Sep 24 '16 at 08:53

Jairo Dev

51
4

Thanks for answering, but I can not able to solve my problem by the method because, I am generating not only this div. – Merbin Jo Sep 24 '16 at 09:18
You shouldn't have to build complex DOM elements with strings. If that array is going to have several objects and you want a div with a onclick callback for each object... Check this out: https://jsfiddle.net/o9ctpuno ... I did it my way. Hope it helps, and I'd be glad to explain it further if you need. – Jairo Dev Sep 24 '16 at 09:58

score 0 · Answer 6 · answered Sep 24 '16 at 09:08

Since what you need has already been answered above, I'll just add that the way you are trying to access and manipulate DOM element is not safe or recommended way of handling dom elements. Instead of directly writing to DOM, its better to make use of addEventListner() function and bind your element to it.

For instance, instead of writing ,

strVar +="<div onclick='openfullanswer("+result[i].ReplyID+",'"+result[i].Description+"','"+result[i].Code+"');'>Test code</div>";

you should be instead doing

strVar.outerHTML += '<input id="btncall" ...>'

document.getElementById ("btncall").addEventListener ("click", openfullanswer(parameters), false);

How to convert html to variable in javascript?

6 Answers6