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

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

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

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

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

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

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

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

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

1. 最后，可以根据具体需求，进一步优化和扩展功能。例如，可以使用不同的HTML元素类型创建子节点，应用不同的样式和布局，添加更多的交互行为等。

这样，当按钮被点击时，就会添加和显示一个新的子节点到容器中。

腾讯云相关产品和产品介绍链接地址：

• 云开发（https://cloud.tencent.com/product/tcb）
• 云服务器（https://cloud.tencent.com/product/cvm）
• 云数据库 MySQL 版（https://cloud.tencent.com/product/cdb）
• 云存储（https://cloud.tencent.com/product/cos）
• 人工智能（https://cloud.tencent.com/product/ai）
• 物联网开发平台（https://cloud.tencent.com/product/iotexplorer）
• 区块链服务（https://cloud.tencent.com/product/tbaas）
• 腾讯会议（https://cloud.tencent.com/product/tcmeeting）
• 腾讯云直播（https://cloud.tencent.com/product/css）
• 腾讯云音视频处理（https://cloud.tencent.com/product/vod）
• 腾讯云元宇宙（https://cloud.tencent.com/product/tgsp）