如何动态添加新的tab onclick并填充预先设计的片段？

<ul id="tabContainer">
  <li onclick="loadFragment(1)">Tab 1</li>
  <li onclick="loadFragment(2)">Tab 2</li>
  <li onclick="loadFragment(3)">Tab 3</li>
</ul>

<button onclick="addNewTab()">Add New Tab</button>

<div id="fragmentContainer">
  <div id="fragment1">
    <h2>Fragment 1</h2>
    <p>This is the content of Fragment 1.</p>
  </div>
  <div id="fragment2">
    <h2>Fragment 2</h2>
    <p>This is the content of Fragment 2.</p>
  </div>
  <div id="fragment3">
    <h2>Fragment 3</h2>
    <p>This is the content of Fragment 3.</p>
  </div>
</div>

function addNewTab() {
  var tabContainer = document.getElementById("tabContainer");
  var newTab = document.createElement("li");
  newTab.innerHTML = "New Tab";
  newTab.onclick = function() {
    loadFragment(4);
  };
  tabContainer.appendChild(newTab);
}

function loadFragment(fragmentId) {
  var fragmentContainer = document.getElementById("fragmentContainer");
  var fragment = document.getElementById("fragment" + fragmentId);
  fragmentContainer.innerHTML = "";
  fragmentContainer.appendChild(fragment.cloneNode(true));
}