使用API​​动态地使用新li附加href

Question

在使用API​​时，如何将动态更改的href添加到附加的<a>元素中。它就行了

$("#list").append($("<a href='data[3][0]'><li></li></a>").text(data[1][0]));

data[3][0]会提供一个网站名称，例如＆＃34; https://en.wikipedia.org/wiki/China＆＃34;来自维基API，并没有工作。添加例如＆＃34; https://www.google.com＆＃34;到href工作正常。我想解决方法可能是事先将data[3][0]改为实际值，但我不知道该怎么做。

var title = document.querySelector("#title");
var description = document.querySelector("#description");
var link = document.querySelector("#link");

var myData = {}

$("#search").keyup(function(e){
  var searchTerm = this.value;
  if(e.which == 13) {
    $.ajax({
        url: 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=' + searchTerm,
        data: myData,
        type: 'GET',
        dataType: 'jsonp',
        headers: { 'Api-User-Agent': 'Example/1.0' },
        success: function(data) {
          $("#list").append($("<a href='data[3][0]'><li></li></a>").text(data[1][0]));
          $("#list").append($("<li></li>").text(data[2][0]));        
        }
    });
  };
});

提前致谢。

Answer 1

试试这个

$("#list").append($("<a href='"+data[3][0]+"'><li></li></a>").text(data[1][0]));

Answer 2

字符串连接很快就会变得很麻烦。幸运的是，从1.4开始，jQuery带有一个简单的函数签名：

  

jQuery（ html ，属性）
   html ：输入：htmlString。定义单个独立HTML元素的字符串
  属性：键入：PlainObject。调用新创建的元素的属性，事件和方法的对象。

适用于您的代码的内容包括：

$('<a><li/></a>', {href: data[3][0]})
  .appendTo(document.querySelector("#list"))
  .text(data[1][0])

但是等等..！锚<a>标记不应包含<li>元素作为直接子元素。 The HTML <li> (…) must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>)

最后，您的代码可以这样编写：

$('<li><a/></li>').appendTo(document.querySelector("#list"))
  .find('a').attr('href',data[3][0]).text(data[1][0])

＆＃13;

＆＃13;

let data = ['http://nowhere.com', 'Nowhere'];

document.querySelector('button').addEventListener('click', e => {
$('<li><a/></li>')
      .appendTo(document.querySelector("#list"))
      .find('a').attr('href',data[0]).text(data[0])
})

＆＃13;

li, a{color: black}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list"></ul>
<button>Add item to list</button>

＆＃13;

＆＃13;

＆＃13;