javascript - 在无序列表li标签中动态插入img源

我正在尝试动态插入图像源，但是图像的方向存在一些问题。
我的代码如下所示。

$.each(mydata, function(index, data){
    $('#data').append('<li>+ <img src='+mydata[index].team.crestUrl +'>
    <a id="to_details" href="#">'+'<span id="'+ index +'" class="ui">' +
      mydata[index].team.name +'</span></a></li>');

进行以下更改时，图像完全不会出现：

$.each(mydata, function(index, data){
    $('#data').append('<li> <img src='+mydata[index].team.crestUrl +'>
    <a id="to_details" href="#">'+'<span id="'+ index +'" class="ui">' +
       mydata[index].team.name +'</span></a></li>');

图片中给出了一个例子



我尝试了很多方法，但是它仍然对我不起作用。

最佳答案

构建HTML字符串通常非常混乱，并且可能导致字符编码和字符串文字终止的问题（如您所见）。

我发现最好构造元素而不是字符串。例如

$('#data').append(mydata.map(({ team }, index) => $('<li>').append([
  $('<img>', { src: team.crestUrl }),
  $('<a>', { id: 'to_details', href: '#' }).append($('<span>', {
    id: index,
    class: 'ui',
    text: team.name
  }))
])))

const mydata = [{
  team: { name: 'Team #1', crestUrl: 'https://via.placeholder.com/100x50?text=Team+1+Crest' },
}, {
  team: { name: 'Team #2', crestUrl: 'https://via.placeholder.com/100x50?text=Team+2+Crest' },
}]

$('#data').append(mydata.map(({ team }, index) => $('<li>').append([
  $('<img>', { src: team.crestUrl }),
  $('<a>', { id: 'to_details', href: '#' }).append($('<span>', {
    id: index,
    class: 'ui',
    text: team.name
  }))
])))

ul { list-style: none; margin: 0; padding: 0; }
li { display: flex; margin: 1rem 0; align-items: center; }
li img { margin-right: 1rem; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="data"></ul>