제이쿼리를 사용해 요소를 생성하는 방법과 간단하게 클래스, 아이디를 비롯하여 CSS스타일과 이벤트를 지정하는 방법에 대하여 알아보려합니다.

먼저 위에 사용된 방법 #1과 아래에 사용된 방법 #2를 비교해 주시기 바랍니다. 얼마나 간단하게 지정할 수 있는지 한눈에 보실 수 있습니다.


#1 예제소스 코드 : 요소 생성 후 개별적인 메소드를 사용해 스타일, 이벤트 지정한 방법



var testEle = $('<div>');
// div 태그를 생성 후 변수 testEle에 지정

testEle.attr('id', 'testId');
// testEle 요소에 아이디값 testId를 지정

testEle.addClass('testClass');
// testEle 요소에 클래스명 testClass를 지정

testEle.css('color', '#fff');
testEle.css('width', '60px');
testEle.css('height', '60px');
// testEle 요소에 각각의 스타일을 지정

testEle.click(function() {
alert();
})
// testEle에 클릭이벤트를 지정

위의 방법처럼 하나하나 개별적으로 지정하지 않고 동시에 클래스, 아이디, 스타일, 이벤트를 지정한 방법으로 아래 예제를 참고하세요.

#2 예제소스 코드 : 요소 생성과 스타일, 이벤트를 한번에 지정한 방법



var testEle = $('<div>', {
id: "testId",
class: "testClass",
css: {
color: "#fff",
width: "60px",
height: "60px"
},
click: function() {
alert();
}
});


한번에 복잡한 코드가 간단하게 지정되어 코드 가독성이 뛰어나고 입력시간도 단축할 수 있는 방법입니다. 물론 위 코드와 아래 코드의 결과는 같습니다.