jQuery 새 요소 생성

jQuery 새 요소 생성

1 예시 1: div 생성

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
	$('#button-add-div').click(function() {
               $("<input>", {
			css: {
				width: "200px",
				height: "50px",
			},
                       type:"text",
		});

	});
});
</script>

<button id='button-add-div'>추가</button>

2 예시 2: text, click 포함

• 위 예시에 text와 click이벤트를 더함

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
	$('#button-add-div').click(function() {
		$("<div>", {
			css: {
				width: "200px",
				height: "50px",
				backgroundColor: "yellow"
			},
			text: "안녕하세요 (클릭가능)",
			click: function() {
				alert('클릭됨');
			}
		}).appendTo("body");
	});
});
</script>

<button id='button-add-div'>추가</button>

3 같이 보기

• 자바스크립트 createElement
• jQuery append()
• jQuery prepend()
• jQuery after()
• jQuery before()

4 참고 자료

• http://www.w3schools.com/jquery/jquery_dom_add.asp
• http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent