[Javascript와 jQuery비교] 배열데이터로 동적 테이블목록 출력하기

아래의 배열데이터를 테이블로 출력할 때 순수자바스크립트와 jQuery로 각각 어떻게 표현하는지 비교해보겠습니다.

var data = [
    ["내용1_1", "내용1_2"],
    ["내용2_1", "내용2_2"],
    ["내용3_1", "내용3_2"],
    ["내용4_1", "내용4_2"]
];

 

준비된 테이블형태는 다음과 같고 tbody안에 <tr><td>내용1_1</td><td>내용1_2</td></tr>과 같은 형식으로 출력되도록 할 것입니다.

<table class="list">
    <thead>
        <th>항목1</th>
        <th>항목2</th>
    </thead>
    <tbody>
    </tbody>
</table>

 

 

예상 결과화면은 다음과 같습니다.

 

 

참고로 스타일은 생략해도되지만 전 대략적으로 잡아주겠습니다.

<style>
h3 {margin-bottom:10px;}
table {width:30%; margin-bottom:30px; border-collapse:collapse;}
table th, table td {border:1px solid #ddd;}
</style>

 

 

 

순수 자바스크립트로 테이블목록 출력

/* vanilla javascript */
document.addEventListener("DOMContentLoaded", function() {
    var $listTbody = document.querySelector(".list tbody");
    data.forEach(function(val) {
        $listTbody.innerHTML +="<tr><td>" + val[0] + "</td><td>" + val[1] + "</td></tr>";
    });
});

 

 

jQuery로 테이블목록 출력

/* jQuery */
$(document).ready(function() {
    var $listTbody = $(".list tbody");
    data.forEach(function(val) {
        $listTbody.append("<tr><td>" + val[0] + "</td><td>" + val[1] + "</td></tr>");
    });
});

 

 

간단한 예제라 그런지 순수 자바스크립트와 jQuery간의 코드분량차이가 많이 나진 않습니다. 다만 주의할 것은 각 속성또는 메서드마다 서포트브라우저가 다르므로 하위호환성이 필요한 경우 잘 확인을 해주셔야 합니다. (ie지원 종료전까지 참고요망)

 

속성/메서드	ie호환 버전/문법표현변화
addEventListener	ie9이상
querySelector	ie8이상
forEach	ie9이상
innerHTML	ie4이상 / Dom요소추가 가능: ie10이상