如何在点击按钮时添加和显示新的子节点？

在前端开发中，可以通过以下步骤来实现在点击按钮时添加和显示新的子节点：

首先，需要在HTML中创建一个按钮和一个容器元素，用于显示子节点。例如：

<button id="addButton">添加子节点</button>
<div id="container"></div>

接下来，在JavaScript中获取按钮和容器的引用，并为按钮添加点击事件监听器。当按钮被点击时，将执行一个函数来添加和显示新的子节点。例如：

const addButton = document.getElementById("addButton");
const container = document.getElementById("container");

addButton.addEventListener("click", function() {
  // 添加和显示新的子节点的逻辑
});

在点击事件的处理函数中，可以使用DOM操作方法来创建新的子节点，并将其添加到容器中。例如，可以使用createElement方法创建新的子节点元素，并使用appendChild方法将其添加到容器中。同时，可以设置新子节点的内容和样式。例如：

addButton.addEventListener("click", function() {
  const newChild = document.createElement("div");
  newChild.textContent = "新的子节点";
  newChild.style.backgroundColor = "lightblue";
  
  container.appendChild(newChild);
});