为何输入值为"d"时DOM中仅显示数组最后一个名字而非全部？

嘿，这个问题我太熟悉啦！你控制台能打出两个名字，但DOM里只显示最后一个，核心原因很简单：你每次循环都用main.innerHTML = ...直接赋值，这会把之前已经插入到main元素里的内容完全覆盖掉。哪怕前面循环已经把"dave"插进去了，下一次循环遇到"david"时，就会把main里的内容换成"david"，最后自然只剩最后一个匹配项。

下面给你两种靠谱的解决方案：

方案一：使用innerHTML +=追加内容 #

这种方式最直接，不过要记得在循环开始前先清空main的内容，不然每次输入新内容时，旧的结果会一直累加在后面：

let arr = [ { name: "dave" }, { name: "david" } ];
inp1.oninput = function(){
  console.log(inp1.value)
  // 先清空之前的搜索结果
  main.innerHTML = '';
  for (var i = 0; i < arr.length; i++) {
    if (arr[i].name.includes(inp1.value)) {
      // 用+=追加，而不是覆盖原有内容
      main.innerHTML += ` <p>${arr[i].name}</p> `
      console.log(arr[i].name)
    }
  }
}

方案二：先拼接字符串再一次性赋值（更高效） #

频繁修改DOM会影响性能，所以更推荐先把所有要显示的内容拼接成一个字符串，最后一次性赋值给innerHTML，减少DOM操作次数：

let arr = [ { name: "dave" }, { name: "david" } ];
inp1.oninput = function(){
  console.log(inp1.value)
  let resultContent = '';
  for (var i = 0; i < arr.length; i++) {
    if (arr[i].name.includes(inp1.value)) {
      // 把匹配到的内容拼接到结果字符串里
      resultContent += ` <p>${arr[i].name}</p> `
      console.log(arr[i].name)
    }
  }
  // 一次性把所有内容插入到main中
  main.innerHTML = resultContent;
}

两种方案都能解决你的问题，第二种在数据量较大时性能会更好哦～

内容的提问来源于stack exchange，提问作者Mr.Ulis