javascript - 从数组创建链接列表

Question

我正在尝试传递一个数组并从数组中的值返回一个链接列表。

这才是我想要的

var list = ["链接 1", "链接 2", "链接 3"]

• > Link 1
• > Link 2
• > Link 3

我尝试了几种不同的方法，但遇到了不同的错误。我希望有人能指出我正确的方向或指出我的问题所在。

  var list = document.createElement('ul').attr("id", "ticketList"); // Create the list element

  $.each(arr, function(i, arr) {
    $("#ticketList").append("<li><a href="'https://jeng.internal.com/browse/'+arr[i]+'"  id="'+arr[i]+'_link">'+arr[i]+'</a></li>");

    return list;
  }

我得到了错误

Uncaught ReferenceError: onSearchClickHandler is not defined

我也试过:

function makeUL(arr) {  

  var list = document.createElement('ul'); // Create the list element

  for (var i = 0; i < arr.length; i++) { //loop through the array to make the list
        var z = document.createElement('li');
        var item = '<a href="https://jeng.internal.com/browse/'+arr[i]+'"  id="'+arr[i]+'_link">'+arr[i]+'</a>';
        z.appendChild(item)
        list.appendChild(z); // Add it to the list
    }
    return list;
  }

从这里我得到错误

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

我环顾四周并基于 this问答 我尝试在 .innerHTML 中添加，但它让我回到原来的相同错误 Uncaught ReferenceError

如有任何帮助，我们将不胜感激。

Answer 1

为达到预期结果，请对您的代码进行以下更改

1. 创建 ul 元素并附加到 body

   var list = document.createElement('ul');//创建列表元素 $("body").append(列表)

2. 然后添加属性id -ticketList

   $('ul').attr("id", "ticketList");

3. 使用 $.each 循环 arr

引用工作代码

var arr = ["Link 1", "Link 2", "Link 3"]

var list = document.createElement('ul'); // Create the list element
$("body").append(list)
$('ul').attr("id", "ticketList");
  $.each(arr, function(i, arr) {
    $("#ticketList").append("<li><a href='https://jeng.internal.com/browse/"+arr+"'  id="+arr+"_link>"+arr+"</a></li>");
  })

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

codepen - https://codepen.io/nagasai/pen/LYPJoaN?editors=1010