用新数据重新填充选项卡

function updateTab() {
  var anotherArr = [];
  var person5 = {
    ["first-Name"]: "Jun",
    ["last-Name"]: "Kim",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person6 = {
    ["first-Name"]: "Scooby",
    ["last-Name"]: "Doo",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
  };
  var person7 = {
    ["first-Name"]: "Seiya",
    ["last-Name"]: "Shun",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  var person8 = {
    ["first-Name"]: "Ikki",
    ["last-Name"]: "Hyuga",
    ["age"]: 18,
    ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
  };
  anotherArr.push(person5, person6, person7, person8);

  var parent = document.getElementsByClassName('line1')[0];
  var frag = document.createDocumentFragment();

  anotherArr.forEach((person, i) => {
    var name = document.createElement('h4');
    var desc = document.createElement('p');
    var button = document.createElement('div');
    name.className = "lol";
    name.textContent = `${person['first-Name']} ${person['last-Name']}`;
    desc.textContent = ` ${person['person-desc']}`;
    frag.appendChild(name);
    frag.appendChild(desc);

  });
  parent.innerHTML = "";
  parent.appendChild(frag);
}


var personArr = [];
var person = {
  ["first-Name"]: "John",
  ["last-Name"]: "Doe",
  ["age"]: 21,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
personArr.push(person, person2, person3, person4);

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

personArr.forEach((person, i) => {
  var name = document.createElement('h4');
  var desc = document.createElement('p');
  var button = document.createElement('div');

  name.textContent = `${person['first-Name']} ${person['last-Name']}`;
  desc.textContent = ` ${person['person-desc']}`;
  frag.appendChild(name);
  frag.appendChild(desc);

});
parent.appendChild(frag);


function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();

body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.line1 {
  display: inline-block;
}

.size {
  width: 50%;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

.lol {
  color: lime;
  font-weight: bold;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
  <div class="size">
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
    </div>
    <div id="People" class="tabcontent">
      <div class="line1">
      </div>
    </div>
  </div>
  <button type="button" onclick="updateTab()">Update Data!</button>


</body>

</html>