<h1>名簿リスト</h1>
<div id="content"></div>
const content = document.getElementById("content");

function createPersonList() {
  let num = 1;
  
  return (name, age, gender)  => {
    const lists = document.createElement("ul");
    let ret = ( '000' + num++ ).slice( -3 );

    const listNode = `
      <li>NO:${ret}</li>
      <li>氏名:${name}</li>
      <li>年齢:${age}</li>
      <li>性別:${gender}</li>
      `;

    lists.innerHTML = listNode;
    content.appendChild(lists);
  };
}

const createPerson = createPersonList();

createPerson("田中", 32, "男");
createPerson("佐藤", 34, "女");
createPerson("高橋", 45, "男");
createPerson("加藤", 40, "女");
createPerson("竈門", 38, "女");
createPerson("ジョブス", 40, "男");
createPerson("伊藤", 42, "女");
createPerson("飛田", 25, "男");
createPerson("古橋", 29, "男");
createPerson("中村", 28, "女");
createPerson("清水", 25, "男");
createPerson("菅原", 26, "女");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.