时间戳

首页 > 解决方案 > JavaScript 箭头函数创建 li 对象并添加到 HTML 页面

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

问题描述

此前端 JavaScript 代码有效，它从字符串数据列表在 ol 标记中创建 li 。我想在一行中完成...

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

但是这个我收到一个错误：“qlist.html:32 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.”

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

取出“.innerHTML = element”，它会按预期在 ol 标记内创建空的 li 元素

标签： javascripthtmlarrow-functions

解决方案

这个：

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

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

所以当你这样做时：

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

您实际上是在传递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()方法。如果您只想遍历一系列值并对每个值做一些事情，请使用.forEachor for .. of。

推荐阅读