때문에 스크립타큘러스에서는 HTML 앨리먼트 생성을 위해서 Builder라는 클래스를 제공하고 있다. 스크립타큘러스의 Wiki를 보면 다음과 같이 정의되어 있다.
Builder.node( elementName )
Builder.node( elementName, attributes )
Builder.node( elementName, children )
Builder.node( elementName, attributes, children )
Builder.node( elementName, attributes )
Builder.node( elementName, children )
Builder.node( elementName, attributes, children )
같은 함수명으로 4가지로 오버라이딩이 되어 있다. 필요한대로 사용하면 된다.
Builder.node()를 사용하려면 상단에 아래처럼
<script type="text/javascript" src="scriptaculous.js?load=builder"></script>
builder.js를 로드해야 한다.
var elem = Builder.node('div', {id:'test', name:'test', className:'layout'});
=> <div id="test" name="test" class="layout"></div>
var elem = Builder.node('img', {src:'/banner.gif', alt:'광고', onclick:'move();'});
=> <img src="/banner.gif" alt="광고" onclick="move();" />
var span = Builder.node('span', '텍스트 내용...');
=> <span>텍스트 내용...</span>
=> <div id="test" name="test" class="layout"></div>
var elem = Builder.node('img', {src:'/banner.gif', alt:'광고', onclick:'move();'});
=> <img src="/banner.gif" alt="광고" onclick="move();" />
var span = Builder.node('span', '텍스트 내용...');
=> <span>텍스트 내용...</span>
텍스트의 경우는 children이라고 생각하면 된다. 실제로 DOM서치를 하여도 그렇게 나오는거고. {}으로 사용하는 옵션에는 엘리먼트의 어트리뷰트를 그냥 써주면 된다. 몇번 해보면 따로 분석할 필요가 없을정도로 직관적이다. 다만 class는 className이라고 써주어야 한다는 것 외에는....
위처럼 간단한 경우야 innerHTML을 사용해도 되지만 실제 사용하면 훨씬 복잡한 경우가 자식이 있을 경우에는 아래와 같이 사용한다.
var elem = Builder.node('div', {id:'test', name:'test', className:'layout'},
Builder.node('div', {className:'innerStyle'}, '텍스트 내용')
);
=> <div id="test" name="test" class="layout>
<div class="innerStyle">텍스트 내용</div>
</div>
Builder.node('div', {className:'innerStyle'}, '텍스트 내용')
);
=> <div id="test" name="test" class="layout>
<div class="innerStyle">텍스트 내용</div>
</div>
TEXT를 집어 넣을때처런 children 위치에 Builder.noder()를 다시 삽입해 주면 된다. 이런식으로 삽입하면 복잡한 DOM도 직관적으로 만들어 낼 수 있다.
자식이 여러개일 경우는 배열([])을 사용한다.
var elem = Builder.node('div', {id:'test', name:'test', className:'layout'},
Builder.node('ul', {className:'ulstyle'}, [
Builder.node('li', '목록1'),
Builder.node('li', '목록2'),
Builder.node('li', '목록3'),
Builder.node('li', '목록4'),
Builder.node('li', '목록5'),
])
);
=> <div id="test" name="test" class="layout>
<ul class="ulstyle">
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
<li>목록5</li>
</ul>
</div>
Builder.node('ul', {className:'ulstyle'}, [
Builder.node('li', '목록1'),
Builder.node('li', '목록2'),
Builder.node('li', '목록3'),
Builder.node('li', '목록4'),
Builder.node('li', '목록5'),
])
);
=> <div id="test" name="test" class="layout>
<ul class="ulstyle">
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
<li>목록5</li>
</ul>
</div>
한개일때는 그냥 사용해도 되지만 같은 레벨의 자식이 여러개인 경우에는 배열을 이용해서 추가해 주면 된다.
다 만들고 나면 일반적인 방법을 이용해서 만든 객체를 원하는 위치에 삽입해 주면 된다.
$("targetDivision").appenChlild(elem);
$("targetDivision").update(elem);
$("targetDivision").insert(elem);
삽입할 때는 원하는대로 사용이 가능하다.
Comments