[자바스크립트] 객체 데이터를 이용한 HTML 엘리먼트 추가

자바스크립트 (JavaScript)

 

See the Pen 객체 데이터를 이용한 HTML 태그 추가 by kimyangsun (@kimyangsun) on CodePen.

 

[자바스크립트] 객체 데이터를 이용한 HTML 엘리먼트 추가 코드펜 예제입니다.

 

// 운행팀에 강제로 해당 직원들이 추가되어야함
let members = [ // 보통 실무에서 이러한 데이터들은 json이나 xml로 분기되거나 백엔드에서 API로 가져옴
  {name: "김팀장", position: "팀장", number: "043-740-3266", work: "차량운행, 차량관리"},
  {name: "정부팀", position: "부팀장", number: "043-740-3266", work: "관용차량운행"},
  {name: "김직원", position: "직원", number: "043-740-3266", work: "관용차량운행"},
  {name: "이직원", position: "직원", number: "043-740-3266", work: "관용차량 운용 및 관리"},
  {name: "박직원", position: "직원", number: "043-740-3266", work: "관용차량운행"},
  {name: "서인턴", position: "인턴", number: "043-740-3266", work: "관용차량운행"}
]

let titles = document.querySelectorAll('#txt .h2');
[...titles].forEach(item => {
  let text = item.innerText;
  if (text === "운행팀") {
    let table = item.nextElementSibling;
    for (let i = 0; i < members.length; i++) {
      createHTML(members[i], table);
      // createHTML2(members[i], table);
    }
  }
})

// 템플릿 리터럴을 이용해 HTML 추가하는 함수
function createHTML(object, table) {
  let trElement = `
    <tr>
      <td>${object.name}</td>
      <td>${object.position}</td>
      <td>${object.number}</td>
      <td>${object.work}</td>
    </tr>
  `
  let tbody = table.querySelector('tbody');
  tbody.innerHTML += trElement;
}

// 엘리먼트 하나하나 생성해서 추가하는 함수
function createHTML2(object, table) {
  let trElement = document.createElement('tr');
  let name = document.createElement('td');
  let position = document.createElement('td');
  let number = document.createElement('td');
  let work = document.createElement('td');

  name.innerText = object.name;
  position.innerText = object.position;
  number.innerText = object.number;
  work.innerText = object.work;

  trElement.appendChild(name);
  trElement.appendChild(position);
  trElement.appendChild(number);
  trElement.appendChild(work);
  
  let tbody = table.querySelector('tbody');
  tbody.appendChild(trElement);
}