点击保存按钮时，如何避免输入框为空时生成空<li>元素？

原代码： #

const inputBtn = document.getElementById("input-btn")
const inputEl = document.getElementById("input-el") 
const ulEl = document.getElementById("ul-el")
let myLead = []

inputBtn.addEventListener("click", function() {
        myLead.push(inputEl.value)
        renderLoad()
        inputEl.value = "" 

});

function renderLoad() {
    let listItems = "";
    for (let i = 0; i < myLead.length ; i++ ) {
        /* listItems += "<li><a href='#'' target='_blank'>" + myLead[i] + "</li>"; */
        listItems += `
        <li>
            <a href='#' target='_blank'>${myLead[i]}  
        </li>`;
        ulEl.innerHTML = listItems   // follow html rule 
    }
}

示例： #

情况1：输入有值（代码正常工作）

输入: "www.google.com"

输出:

www.google.com

情况2：输入为空（代码异常）

输入:

输出:

（每次点击都会生成空的"

"元素）

修改方案： #

1. 添加输入有效性校验：先获取去除前后空白的输入值，仅当值不为空时，才存入数组并渲染列表；
2. 优化DOM操作逻辑：将列表DOM更新移到循环外部，减少不必要的DOM操作次数。

修改后的代码：

const inputBtn = document.getElementById("input-btn")
const inputEl = document.getElementById("input-el") 
const ulEl = document.getElementById("ul-el")
let myLead = []

inputBtn.addEventListener("click", function() {
    // 去除输入值前后的空白字符
    const inputValue = inputEl.value.trim();
    // 仅当输入值有效时执行存入和渲染
    if (inputValue) {
        myLead.push(inputValue);
        renderLoad();
    }
    // 无论输入是否有效，都清空输入框
    inputEl.value = "";
});

function renderLoad() {
    let listItems = "";
    for (let i = 0; i < myLead.length ; i++ ) {
        listItems += `
        <li>
            <a href='#' target='_blank'>${myLead[i]}  
        </li>`;
    }
    // 循环结束后一次性更新DOM
    ulEl.innerHTML = listItems;
}

说明： #

• trim()可以过滤掉用户输入的纯空格内容，避免生成无意义的空列表项；
• 条件判断if (inputValue)会在输入值为空字符串时直接跳过后续操作；
• 将DOM更新移到循环外，能减少浏览器重绘次数，提升代码运行效率。

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