JS中的HTML连接问题

HTML concatenation issues in JS

本文关键字：问题 连接 HTML 中的 JS      更新时间：2023-09-26

我正在尝试创建一个动态的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>

我知道我用引号弄乱了连接，但我无法修复这个错误。

您说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 ;

相关文章：