如何正确编写这段JavaScript代码？替代innerHTML创建插入元素的方法

直接用innerHTML操作DOM确实不是最优选择——尤其是循环里反复+=的时候，每次都会触发浏览器的DOM重排重绘，性能拉胯；另外如果涉及用户输入内容，还存在XSS注入风险。给你两种更规范的替代方案：

方案1：使用DOM原生API创建元素 #

直接用document.createElement()创建<option>节点，再通过appendChild()添加到<select>中，步骤清晰且安全：

let submit = document.querySelector('input#submit')
let tabelist = document.querySelector('select#tabe')
submit.addEventListener('click', clicar)

function clicar(){
    let number = Number(document.querySelector('input#number').value)
    // 先清空select的所有子元素
    while(tabelist.firstChild){
        tabelist.removeChild(tabelist.firstChild)
    }

    if(isNaN(number) || document.querySelector('input#number').value === ''){
        // 创建invalid提示的option
        const invalidOpt = document.createElement('option')
        invalidOpt.textContent = 'invalid value'
        tabelist.appendChild(invalidOpt)
    }else{
        // 循环创建乘法表的option
        for(let tabenumber = 1; tabenumber <=10; tabenumber++){
            const opt = document.createElement('option')
            opt.textContent = `${number} x ${tabenumber} = ${number * tabenumber}`
            tabelist.appendChild(opt)
        }
    }
}

方案2：用DocumentFragment优化性能 #

如果要创建大量DOM节点，推荐用DocumentFragment——它是一个"虚拟"的DOM容器，把所有新节点先加到片段里，最后一次性插入到真实DOM中，只会触发一次重排，性能更优：

let submit = document.querySelector('input#submit')
let tabelist = document.querySelector('select#tabe')
submit.addEventListener('click', clicar)

function clicar(){
    let inputVal = document.querySelector('input#number').value
    let number = Number(inputVal)
    // 清空现有内容
    tabelist.innerHTML = ''
    const fragment = document.createDocumentFragment()

    if(isNaN(number) || inputVal === ''){
        const invalidOpt = document.createElement('option')
        invalidOpt.textContent = 'invalid value'
        fragment.appendChild(invalidOpt)
    }else{
        for(let tabenumber = 1; tabenumber <=10; tabenumber++){
            const opt = document.createElement('option')
            opt.textContent = `${number} x ${tabenumber} = ${number * tabenumber}`
            fragment.appendChild(opt)
        }
    }
    // 一次性插入所有节点
    tabelist.appendChild(fragment)
}

额外优化点： #

• 原代码里number == ''的判断有问题，因为Number('')会返回0，改成直接判断输入框原始值+isNaN的组合，能更准确识别无效输入
• 循环变量tabenumber用let声明，避免污染全局作用域

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