如何将输入框中逗号分隔的内容拆分后以列表形式展示？

你的现有代码存在两处核心问题：

• appendChild方法需要接收DOM节点对象，你直接传入拼接的HTML字符串会执行报错
• 没有对输入的逗号分隔内容做拆分处理，会把整串输入直接塞进同一个列表项里

修正后可直接运行的完整代码 #

<input type='text' id='idea' />
<input type='button' value='add to list' id='add' />
<ul id='list'></ul>

<script>
document.getElementById("add").onclick = function() {
    // 获取输入内容
    const inputText = document.getElementById("idea").value.trim();
    if (!inputText) return; // 空输入直接拦截
    
    // 按逗号拆分内容，同时去除每个项的前后空白，兼容逗号前后带空格的输入场景
    const itemList = inputText.split(',').map(item => item.trim());
    
    const listContainer = document.getElementById("list");
    // 如果需要每次点击清空原有列表，解开下一行注释即可
    // listContainer.innerHTML = '';
    
    // 遍历生成列表项并插入页面
    itemList.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item; // 用textContent避免XSS安全问题
        listContainer.appendChild(li);
    });
    
    // 可选：点击提交后清空输入框
    document.getElementById("idea").value = '';
}
</script>

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