Frontend/jQuery
07. jQuery, 요소 생성 (append, prepend)
개발개발빈이
2022. 6. 7. 21:00
○ 요소(element) 생성
- 요소(element) : HTML의 모든 태그 (참고 : CSS기본용어 )
- 요소를 생성하는 이유
① 문자 단위의 통신에 많이 사용하기 때문(비동기식) → AJAX
② 댓글 더보기 등 무한 스크롤링하기 위해
- 요소를 생성 및 추가
① 부모.append(자식), 자식.appendTo(부모) : 요소를 끝에 추가
② 부모.prepend(자식), 자식.prependTo(부모): 요소를 앞에 추가
○ 테이블 요소 생성하는 법
- <button id="createBtn">클릭했을 때 <div id="box"></div>에 테이블 생성
<body>
<h3>요소 생성</h3>
<p>
<button id="createBtn">테이블 생성</button>
</p>
<div id="box"></div>
</body>
① 문자열 이용
<script>
$("#createBtn").click(function(){
var table="";
table+="<table border='1'>";
table+="<tr>";
table+=" <td>대한민국</td>";
table+="</tr>";
table+="</table>";
$("#box").html(table);
});//click end
</script>
② append(), prepend() 이용
<script>
$("#createBtn").click(function(){
var $table=$("<table></table>");
var $tr1 =$("<tr><td>사과</td><td>바나나</td></tr>");
var $tr2 =$("<tr>");
var $td1 =$("<td>수박</td>");
var $td2 =$("<td>").text("메론");
//$tr2변수에 $td1, $td2를 마지막에 자식으로 추가
$tr2.append($td1, $td2);
//$table변수에 $tr1, $tr2를 자식으로 추가
$table.prepend($tr1, $tr2);
$("#box").append($table);
});//click end
</script>