DOM数组转无序列表函数失效问题排查及修复方案咨询

让我帮你拆解一下这个函数失效的原因，主要是两个关键的语法和逻辑错误：

错误1：appendChild的调用方式完全错误 #

你在循环里写的这行代码：

ul.appendChild.document.createElement("li").textContent= array[i]

完全不符合DOM API的调用规则。appendChild是一个需要接收元素作为参数的方法，你不能直接在它后面链式调用document.createElement。正确的步骤应该是：

• 先创建<li>元素
• 设置它的textContent
• 再把这个创建好的li元素传入ul.appendChild()中

错误2：ID参数的类型不规范 #

调用函数时你传的ID是数字13：

create_list(["hello","13","Kitchen"],13)

虽然现代浏览器会自动把数字转为字符串，但HTML规范里ID属性的值必须是字符串类型，显式传入字符串（比如"13"）能避免一些潜在的兼容性问题。

修复后的完整代码 #

<script>
function create_list(array, id){
    var ul = document.createElement("ul");
    ul.setAttribute("id", id); // 为ul标签设置指定的id参数

    for (var i = 0 ; i < array.length ; i++){
        // 先创建li元素，设置内容，再添加到ul中
        var li = document.createElement("li");
        li.textContent = array[i];
        ul.appendChild(li);
    }

    document.body.appendChild(ul); // 将ul标签添加到HTML文档的body中
}

// 调用函数，ID传入字符串类型
create_list(["hello","13","Kitchen"], "13");
</script>

额外优化建议（可选） #

• 可以给函数加个参数校验，比如判断传入的array是否真的是数组，避免非数组参数导致报错
• 如果页面中已经存在同名ID的元素，可以先判断再创建，避免重复添加

内容的提问来源于stack exchange，提问作者user13570870