html函数如何实现动态内容显示 html函数在网页交互中的核心应用

<button onclick="showTime()">显示时间</button>
<p id="timeDisplay"></p>

<script>
function showTime() {
  const now = new Date();
  document.getElementById("timeDisplay").textContent = now.toLocaleString();
}
</script>

<input type="text" oninput="searchSuggest(this.value)" placeholder="输入关键词...">
<div id="suggestions"></div>

<script>
function searchSuggest(query) {
  const suggestions = ["苹果", "香蕉", "橙子", "西瓜"].filter(item => item.includes(query));
  document.getElementById("suggestions").innerHTML = 
    suggestions.map(item => <div>${item}</div>).join("");
}
</script>

<input type="text" id="taskInput" placeholder="输入任务">
<button onclick="addTask()">添加</button>
<ul id="taskList"></ul>

<script>
function addTask() {
  const input = document.getElementById("taskInput");
  if (input.value.trim() === "") return;

  const li = document.createElement("li");
  li.textContent = input.value;
  li.onclick = function() { this.remove(); }; // 点击删除
  document.getElementById("taskList").appendChild(li);

  input.value = ""; // 清空输入框
}
</script>

<button onclick="loadUsers()">加载用户</button>
<div id="userContainer"></div>

<script>
function loadUsers() {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => {
      const html = users.map(user => 
        <div><strong>${user.name}</strong> (${user.email})</div>
      ).join("");
      document.getElementById("userContainer").innerHTML = html;
    });
}
</script>