如何修复 JavaScript 动态添加表格行时文本为空的问题

回顾原始代码片段：

const inputListNameText = inputListName.value; // ✅ 此时 inputListNameText 是字符串，如 "Groceries"  // ... fetch 成功后 ... listCell.textContent = inputListNameText.value; // ❌ 错误！字符串没有 .value 属性

由于 inputListNameText 是一个原始字符串（例如 “My List”），它不具备 DOM 元素的属性，因此 inputListNameText.value 恒为 undefined，致使

✅ 正确做法是直接使用该字符串变量：

立即学习“Java免费学习笔记（深入）”；

listCell.textContent = inputListNameText; // ✅ 正确：赋值字符串本身

此外，为提升代码健壮性与可维护性，建议补充以下最佳实践：

✅ 推荐优化后的完整函数

const saveList = () => {   const inputListName = document.getElementById('input-list-name'); // 假设输入框 id 为 'input-list-name'   const inputListNameText = inputListName.value.trim();    // 防止空提交   if (!inputListNameText) {     alert('请输入有效的清单名称');     return;   }    fetch('/api/lists', {     method: 'POST',     headers: { 'Content-Type': 'application/json' },     body: JSON.stringify({ list_name: inputListNameText })   })     .then(response => {       if (!response.ok) throw new Error(`HTTP ${response.status}`);       return response.json();     })     .then(data => {       console.log('新增成功:', data);       console.log('插入名称:', inputListNameText);        const tableBody = document.querySelector('#tbody');       const newRow = document.createElement('tr');        // 创建带复选框和文本的完整行（匹配原有结构）       const checkboxCell = document.createElement('td');       const checkbox = document.createElement('input');       checkbox.type = 'checkbox';       checkbox.className = 'todo__checkbox';       checkboxCell.appendChild(checkbox);        const textCell = document.createElement('td');       textCell.className = 'text-break';       textCell.textContent = inputListNameText; // ✅ 关键修正点        newRow.appendChild(checkboxCell);       newRow.appendChild(textCell);       tableBody.appendChild(newRow);        // 可选：清空输入框并聚焦       inputListName.value = '';       inputListName.focus();     })     .catch(err => {       console.error('保存失败:', err);       alert('清单添加失败，请检查网络或重试');     }); };

⚠️ 注意事项

• 避免重复取值：inputListName.value 只需读取一次，后续直接使用变量；切勿对字符串再调 .value。
• 校验输入有效性：.trim() 可过滤首尾空格，防止仅含空格的“假输入”被提交。
• 处理异步异常：务必用 .catch() 或 try/catch（配合 async/await）捕获网络或解析错误，提升用户体验。
• 语义化结构：若原表格行含

通过以上修正与增强，不仅能立即解决“行已添加但内容为空”的问题，还能构建更可靠、易调试的前端数据同步逻辑。