哪种JavaScript函数更优？b1与b2函数的选择建议

先看你提供的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <input type="text" name="item" id="input">
  <button id="b1">Add</button>
  <button id="b2">Add</button>
  <ul id="list">
  </ul>
  <script>
    let b1 = document.getElementById("b1")
    let b2 = document.getElementById("b2")
    let input = document.getElementById("input")
    let list = document.getElementById("list")

    b1.addEventListener("click", function () {
      if (input.value) {
        list.innerHTML += `<li>${input.value}</li>`  
      }
    })

    b2.addEventListener("click", function () {
      if (input.value) {
        let li = document.createElement("li")
        li.appendChild(document.createTextNode(input.value))
        list.appendChild(li)
      }
    })
  </script>
</body>
</html>

更推荐#b2的写法，核心原因有三个：

• 安全性更高：如果用户输入的内容包含HTML标签（比如<script>alert('恶意内容')</script>），#b1用innerHTML +=会直接解析执行这些标签，引发XSS安全漏洞；而#b2通过document.createTextNode会把所有输入内容当作纯文本处理，完全避免这类风险。
• 性能表现更好：每次执行innerHTML +=时，浏览器会先把列表的现有DOM结构转换成HTML字符串，拼接新内容后再重新解析渲染整个列表——相当于销毁所有旧列表项再重建，当列表项数量较多时，性能损耗会非常明显；#b2的appendChild则是直接在现有DOM树中插入新节点，只操作新增的元素，不会影响已存在的节点，性能开销小很多。
• 可维护性更强：如果后续需要给新创建的<li>添加事件监听、修改样式或者其他DOM操作，#b2的写法直接持有li元素的引用，能直接进行后续操作；而#b1的写法需要重新通过querySelector等方法查询DOM才能拿到新创建的li，步骤更繁琐。

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