以动态内容显示新面板的简便方法

以下是一个简单的示例，展示了如何使用JavaScript动态显示新的面板。

HTML:

<button id="showPanelButton">显示面板</button>
<div id="panelContainer"></div>

<!-- 隐藏的面板 -->
<div id="panel" style="display: none;">
  这是一个新的面板
</div>

JavaScript:

// 获取按钮和面板容器的引用
const showPanelButton = document.getElementById("showPanelButton");
const panelContainer = document.getElementById("panelContainer");

// 当按钮被点击时触发
showPanelButton.addEventListener("click", function() {
  // 显示面板
  panelContainer.innerHTML = ""; // 清空面板容器
  panelContainer.appendChild(createPanel()); // 创建新面板并添加到容器中
});

// 创建新的面板
function createPanel() {
  const panel = document.createElement("div");
  panel.innerHTML = "这是一个新的面板";

  return panel;
}

上述代码中，我们首先获取了按钮和面板容器的引用。然后，我们使用addEventListener方法为按钮的点击事件添加了一个事件监听器。当按钮被点击时，事件监听器会调用一个函数，该函数会执行以下操作：

• 清空面板容器，以便在显示新面板之前先将旧的面板移除。
• 调用createPanel函数创建一个新的面板，并将其添加到面板容器中。createPanel函数返回一个新的div元素，它包含要显示的面板内容。

通过这种方式，每次按钮被点击时，都会显示一个新的面板。