JavaScript箭头函数创建li对象并添加到HTML页面

这个前端JavaScript代码可以工作，它从字符串数据列表在ol标记中创建li iten。我想用一句话来表达

    qelements.map(element => { let litag = document.createElement("li");
                                litag.innerHTML = element;
                                oltag.appendChild(litag) });

但这一次我得到了一个错误：“qlist.html:32 Uncaught TypeError:未能在“节点”上执行“appendChild”：参数1不是“节点”类型

取出“.innerHTML=element”它会像预期的那样在ol标记中创建空的li元素

oltag.appendChild(document.createElement("li").innerHTML = element)

这将赋值表达式的返回值传递给

appendChild

，换句话说，它与

oltag.appendChild（元素）

相同。第一个版本已经是最具可读性的方式了。

这是：

document.createElement("li").innerHTML = element

是赋值表达式。它的结果值将是等号右边的任何值（我假设它是一个字符串）

所以当你这样做的时候：

qelements.map(element => oltag.appendChild(document.createElement("li").innerHTML = element));

实际上，您正在将

元素

传递给

appendChild

并放弃新创建的

li

元素，这不是您想要做的

如果您希望避免在代码的特定部分中出现多行，可以考虑使用一个函数来创建

li

：

function makeLi(content) {
    let litag = document.createElement("li");
    litag.innerHTML = content;
    return litag:
}

然后使用它：

qelements.forEach(element => oltag.appendChild(makeLi(element)));

还要注意，您似乎滥用了

map（）

方法。如果您只想迭代一系列值并对每个值执行操作，请使用

.forEach

或

for。。在我看来：


您应该使用
snake\u case
或
CamelCase
来命名变量。（
qelements
->
qelements
或
q_元素

你应该编写简单易懂的代码，而不是组合复杂的代码。如果你在一个团队中这样做，你会杀死所有其他人，他们很难理解你在写什么。即使你在很长一段时间后回来阅读这些代码，你也不会理解自己


在这种情况下，您可以创建一个助手函数，使其成为一行：

const createLiTagWithText = text => {
  const li = document.createElement("li");
  li.innerHTML = text;
  return li;
}

qElements.map(element => oltag.appendChild(createLiTagWithText(element)));

如果您对返回值不感兴趣，则不应使用
map
；请使用
forEach
。感谢您的帮助！有价值的提示！：-）
const createLiTagWithText = text => {
  const li = document.createElement("li");
  li.innerHTML = text;
  return li;
}

qElements.map(element => oltag.appendChild(createLiTagWithText(element)));