使用 appendChild 将数组转换为列表

Question

如何创建函数接受两个参数，第一个是要添加到的列表元素，第二个是要转换为列表项的字符串数组。

参数是元素和arr。我尝试创建列表元素并使用 appendChild 将数组字符串附加到元素中。

function filler(elem, arr){
  elem = document.createElement("li");
  for(let i = 0; i < arr.length; i++){
    elem.appendChild(arr[i]);
  }
}

错误信息：

在 'Node' 上执行 'appendChild' 失败：参数 1 不是类型 '节点'。

Answer 1

你有几个问题：

1. 您正在函数中重新初始化 elem，因此，传递的 elem 将被覆盖，这意味着您将无法向其附加元素。

2. 您正在尝试将字符串附加到您的 elem 元素。这不起作用，因为您需要附加一个节点（因为appendChild() 接受一个节点，而不是一个字符串）。要附加一个节点，您可以使用document.createElement("li") 在您的JS 中创建一个<li> HTML 元素，然后您可以将文本设置为当前数组值的文本（使用.textContent）。

请看下面的例子：

function filler(elem, arr){
  for(let i = 0; i < arr.length; i++){
    const li = document.createElement("li");
    li.textContent = arr[i];
    elem.appendChild(li);
  }
}

const lst = document.getElementById('lst');
filler(lst, ["eggs", "bread", "butter"]);

<ul id="lst"></ul>

Answer 2

填充元素并返回完整列表。

function filler(elem, arr){
  for(let i = 0; i < arr.length; i++){
    listItem = document.createElement('li');
    listItem.innerHTML = arr[i];
    elem.appendChild(listItem);
  }
  return elem;
}

这是一个用例filler(document.createElement('ul'), ['a', 'b', 'c']);