const characters = [
  { name: "아이언맨", powers: ["비행", "레이저 빔", "히트 미사일"] },
  { name: "캡틴 아메리카", powers: ["초인간적인 힘", "방패"] },
  { name: "토르", powers: ["번개", "망치"] },
  { name: "헐크", powers: ["초인간적인 힘", "분노"] },
];

// 다이어그램 요소 생성
const diagramElement = document.createElement("ul");

// 캐릭터 목록을 순회하며 다이어그램에 추가
characters.forEach((character) => {
  const listItem = document.createElement("li");
  const characterName = document.createElement("h3");
  characterName.textContent = character.name;
  const powersList = document.createElement("ul");

  // 캐릭터의 특징들을 다이어그램에 추가
  character.powers.forEach((power) => {
    const powerItem = document.createElement("li");
    powerItem.textContent = power;
    powersList.appendChild(powerItem);
  });

  // 다이어그램에 캐릭터 이름과 특징들을 추가
  listItem.appendChild(characterName);
  listItem.appendChild(powersList);
  diagramElement.appendChild(listItem);
});

// 다이어그램을 페이지에 추가
document.body.appendChild(diagramElement);