如何使用javascript在现有选项卡中添加and和tbody标记

<ul id="tabs">
  <li class="tab">选项卡1</li>
  <li class="tab">选项卡2</li>
  <li class="tab">选项卡3</li>
</ul>

// 获取所有的选项卡标签
var tabs = document.getElementsByClassName('tab');

// 为每个选项卡标签添加点击事件监听器
for (var i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', function() {
    // 在这里编写选项卡的切换逻辑
    // 可以使用 CSS 类来显示/隐藏相应内容区域
  });
}

tabs[i].addEventListener('click', function() {
  // 先移除所有选项卡的活动状态
  for (var j = 0; j < tabs.length; j++) {
    tabs[j].classList.remove('active');
  }

  // 将当前选项卡设为活动状态
  this.classList.add('active');

  // 在此处添加其他逻辑，例如显示/隐藏相应的内容区域
  // 假设每个选项卡都有对应的内容区域，例如 <div class="tab-content">
  // 可以通过与选项卡索引的对应关系来判断何时添加 <and> 和 <tbody> 标记
  var index = Array.prototype.indexOf.call(tabs, this);
  var tabContent = document.getElementsByClassName('tab-content')[index];

  // 添加 <and> 和 <tbody> 标记
  tabContent.innerHTML = '<and><tbody>' + tabContent.innerHTML + '</tbody></and>';
});