JavaScript小案例：输入框输入水果，判断水果名称，在ul里面输出？

<input type="text" id="inp"> <button id="btn">按钮</button>
<ul id="list">
    <li>水果价格表</li>
</ul>

第一种写法 ：

<script>
    var fruits = [
          {
            name:"苹果",
            price:8
          },
          {
            name:"梨子",
            price:5
          },
          {
            name:"草莓",
            price:1
          },
          {
            name:"西瓜",
            price:15
          },
        ]
    //先获取上面的3个id
    var inp = document.getElementById("inp");
    var btn = document.getElementById("btn");
    var list = document.getElementById("list");
    //点击按钮的触发事件
    btn.onclick = function () {
      //定义一个布尔类型
      var flag = true;
      //循环遍历上面的数组
      for (var i = 0; i < fr