使用javascript动态添加列表项和链接

Question

我有javascript函数，可以在html列表中添加列表项，并且它可以正常工作。我想要的是添加一个链接与动态添加的每个链接项。这是我的代码：

$.ajax({
    url: uri1 + "?region=" + regionForSearch,
    method: "GET",
    dataType: "json",
    data: {
      region: regionForSearch
    }
  })
  .done(function(data) {
    // On success, 'data' contains a list of products.
    var urifordelete = ""

    $('#factories').empty();
    $.each(data, function(key, item) {
      // I want to add code here
      $('<li>', {
        text: formatItem(item)
      }).appendTo($('#factories'));
    });

    iscrtajMapu(data);
  });

我想要的是在每个列表项中添加链接，链接应该像这样创建：

var urlForLink = 'http://localhost:50758/api/factories/' + item.ID;

我是javascript和html的新手。每个建议都表示赞赏。

更新：

这就是我现在所拥有的：

链接导致删除项目，所以我希望信息是纯文本，信息旁边的链接表示删除并导致删除，就像我的数据现在导致该操作一样。

Answer 1

看一下jQuery的.append()。

你可以这样做：

$('#factories').append('<li><a href="' + urlForLink + '">' + formatItem(item) + '</a></li>');

Answer 2

您可以先将<a>附加到<li>，然后将<li>附加到#factories。以下是操作细分：

var li = $('<li>');
var a = $('<a>').attr('href', urlForLink).text(formatItem(item));
li.append(a);
li.appendTo('#factories');

或者你可以在一行中完成（为了便于阅读而分解）：

$('#factories')
  .append( 
    $('<li>')
      .append( 
        $('<a>')
        .attr('href', urlForLink)
        .text(formatItem(item))
      )
    )

根据您的更新进行编辑

只需将文字添加到<li>而不是<a>

$('#factories')
  .append( 
    $('<li>')
      .text(formatItem(item))    // <--- add text here
      .append( 
        $('<a>')
        .attr('href', urlForLink)
        .text('Delete')          // <--- add text to delete here
      )
    )