如何显示搜索栏，并在单击时将其放入导航项目中？

<div class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li>
      <form id="search-form">
        <input type="text" id="search-input" placeholder="搜索...">
        <button type="submit">搜索</button>
      </form>
    </li>
  </ul>
</div>

.navbar {
  background-color: #f2f2f2;
  padding: 10px;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.navbar li {
  margin-right: 10px;
}

.navbar form {
  display: flex;
}

.navbar input[type="text"] {
  padding: 5px;
  border: none;
  border-radius: 3px;
}

.navbar button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
}

document.getElementById("search-form").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为
  
  var searchInput = document.getElementById("search-input");
  var searchValue = searchInput.value;
  
  if (searchValue.trim() !== "") {
    var navItem = document.createElement("li");
    var navLink = document.createElement("a");
    navLink.href = "#";
    navLink.textContent = searchValue;
    navItem.appendChild(navLink);
    
    var navList = document.querySelector(".navbar ul");
    navList.appendChild(navItem);
    
    searchInput.value = ""; // 清空搜索栏内容
  }
});