HTML concatenation issues in JS

Question

I am trying to make a dynamic HTML which I'll append using jquery before append if I'll console the HTML everything looks fine but after append in browser The whole structure messed up.

Here is my HTML :

<script>
var title = "my title";

var toolbar ='<hm_toolbar user="current_user " upp="hm"  index="hmIndex "></hm><synapse_toolbar uuid=" hm.hm_pk " my-method="get_linked_facts" ng-if=" flag == true "></synapse_toolbar>';

var map_html = '<a onclick="panToMarker(' + lat + ',' + long + ')"> ' + title +'"</a>' + toolbar ;

var li_html = "$('#" + title + "').append('<li class=\"list-group-item\"><div dynamic=\" " + map_html + " \"></div></li> ')" ;

var g =title.replace(/ /g,"_");;

var fn = "function "+ g +"(){ console.log('--working--'); "+ li_html +"; }";
    console.log(fn)
   eval(fn);
  }
  </script>

When the above li_HTML does its work means append the HTML the appended is all messed up

Appended HTML :

<li class="list-group-item"><div pantomarker(49.711083,6.251445)"="" dynamic=" &lt;a onclick="> Test"<hm_toolbar index="hmIndex " upp="hm" user="current_user "></hm_toolbar><synapse_toolbar ng-if=" flag == true " my-method="get_linked_facts" uuid=" hm.hm_pk "></synapse_toolbar> "&gt;</div></li>

I know I have messed up the concatenation using with quotes but I am not able to fixed the bug .

try escaping your ' characters inside the string. do it like: var li_html = "$(\'#" + title + "\').append(\'<li class=\"list-group-item\"><div dynamic=\"" + map_html + " \"></div></li> \')" ; — Vance
– Vance, Commented Sep 30, 2015 at 9:03
@saf there is the " quote is mising at var map_html = '<a onclick="panToMarker(' + lat + ',' + long + ')"> ' + title +'"</a>' + toolbar ; i think that is making problem — Himesh Aadeshara
– Himesh Aadeshara, Commented Sep 30, 2015 at 9:43

StoYan · Accepted Answer · 2015-09-30 10:04:34Z

1

You said that the console.log() looks OK but you have eval() after that which means that you have to escape some quotes twice.

Try this:

var toolbar ='<hm_toolbar user=\\\'current_user \\\' upp=\\\'hm\\\'  index=\\\'hmIndex \\\'></hm><synapse_toolbar uuid=\\\' hm.hm_pk \\\' my-method=\\\'get_linked_facts\\\' ng-if=\\\' flag == true \\\'></synapse_toolbar>';

var map_html = '<a onclick=\\\'panToMarker(' + lat + ',' + long + ')\\\'> ' + title +'</a>' + toolbar ;

edited Sep 30, 2015 at 10:04

answered Sep 30, 2015 at 9:37

StoYan

2552 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML concatenation issues in JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related