javascript - JS 中的 HTML 连接问题

Question

我正在尝试制作一个动态 HTML，如果我会控制台 HTML，那么我将在附加之前使用 jquery 附加该动态 HTML，一切看起来都很好，但在浏览器中附加之后整个结构困惑了。

这是我的 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>

当上面的 li_HTML 完成它的工作意味着追加 HTML 时，追加的内容都搞乱了

附加 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>

我知道我用引号搞乱了连接，但我无法修复该错误。

Answer 1

您说 console.log() 看起来不错，但之后有 eval() 这意味着您必须转义一些引号两次。

试试这个:

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 ;