<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>メモ帳</title>
  <script>
    function search() {
      var query = document.getElementById('searchInput').value;
      var historyElement = document.getElementById('searchHistory');
      var newHistoryItem = document.createElement('div');
      newHistoryItem.textContent = query;
      historyElement.appendChild(newHistoryItem);
    }

    function clearHistory() {
      var historyElement = document.getElementById('searchHistory');
      historyElement.innerHTML = ''; // 履歴を消去
    }
  </script>
</head>
<body>
  <!-- ボックスとメモボタン -->
  <input type="text" id="searchInput">
  <button onclick="search()">メモ</button>
  
  <!-- 履歴を消去するボタン -->
  <button onclick="clearHistory()">履歴を消去</button>

  <!-- メモ履歴を表示する領域 -->
  <div id="searchHistory">
    <!-- ここに履歴が表示されます -->
  </div>
</body>
</html>