我想使用JavaScript DOM创建一个更详细的按钮/选项卡

// 创建按钮元素
var button = document.createElement("button");

// 设置按钮文本
button.innerHTML = "点击我";

// 添加按钮点击事件监听器
button.addEventListener("click", function() {
  // 在这里编写按钮点击后的操作
  alert("按钮被点击了！");
});

// 将按钮添加到页面中的某个元素中
var container = document.getElementById("container");
container.appendChild(button);

// 创建选项卡容器元素
var tabContainer = document.createElement("div");

// 创建选项卡按钮元素
var tabButton1 = document.createElement("button");
tabButton1.innerHTML = "选项卡1";

var tabButton2 = document.createElement("button");
tabButton2.innerHTML = "选项卡2";

// 创建选项卡内容元素
var tabContent1 = document.createElement("div");
tabContent1.innerHTML = "选项卡1的内容";

var tabContent2 = document.createElement("div");
tabContent2.innerHTML = "选项卡2的内容";

// 添加选项卡按钮点击事件监听器
tabButton1.addEventListener("click", function() {
  // 切换到选项卡1
  tabContent1.style.display = "block";
  tabContent2.style.display = "none";
});

tabButton2.addEventListener("click", function() {
  // 切换到选项卡2
  tabContent1.style.display = "none";
  tabContent2.style.display = "block";
});

// 将选项卡按钮和内容添加到选项卡容器中
tabContainer.appendChild(tabButton1);
tabContainer.appendChild(tabButton2);
tabContainer.appendChild(tabContent1);
tabContainer.appendChild(tabContent2);

// 将选项卡容器添加到页面中的某个元素中
var container = document.getElementById("container");
container.appendChild(tabContainer);