○ 요소(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>
'Frontend > jQuery' 카테고리의 다른 글
| 08. jQuery, moment.js 오픈소스 (날짜 자동 생성, 아날로그 시계) (0) | 2022.06.07 |
|---|---|
| 06. jQuery, this & index (0) | 2022.06.07 |
| 05. jQuery, each반복문 (0) | 2022.06.07 |
| 04. jQuery, css() 함수 / prop()와 attr() 함수 (0) | 2022.06.03 |
| 03. jQuery, text()와 html() 함수 / jQuery Method Chaining (0) | 2022.06.03 |
댓글