목차
요소를 생성하는 이유
- 문자 단위의 통신에 많이 사용하기 때문(비동기식) -> AJAX
- 댓글의 더보기 등의 무한 스크롤링하기 위해
//요소 생성 및 추가
append(), appendTo() 요소를 끝에 추가
prepend(), prependTo() 요소를 앞에 추가
부모.append(자식)
자식.appendTo(부모)append와 appendTo 모두 요소를 끝에 추가한다는 것은 같은데 어떤 차이가 있을까?
append는 $(a).append(b)라고 작성하면 a뒤에 b가 추가된다.
appendTo는 $(b).append(a)라고 작성하면 b를 a 뒤에 추가한다.
prepend와 prependTo의 차이도 마찬가지이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>08_요소생성.html</title>
<!-- jQuery import -->
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<h3>요소 생성</h3>
<p>
<button id="createBtn">테이블 생성</button>
</p>
<div id="box"></div>
<!--
<table> 요소 element
border 속성 property, attribute
-->
<script>
$("#createBtn").click(function(){
//alert();
//1)
/*
let table = "";
table += "<table border='1'>";
table += "<tr>";
table += " <td>대한민국</td>";
table += "</tr>";
table += "</table>";
//$("#box").html(table); //마크업
//$("#box").text(table); //순수문자열
*/
//2)
let $table = $("<table></tabe>"); //여는태그를 맨위, 닫는태그를 맨아래에 쓸 필요없음
let $tr1 = $("<tr><td>사과</td><td>바나나</td></tr>");
let $tr2 = $("<tr>");
let $td1 = $("<td>수박</td>");
let $td2 = $("<td>").text("메론");
//$tr2 변수에 $td1, $td2를 마지막에 자식으로 추가
$tr2.append($td1, $td2); //수박, 메론
//$table 변수에 자식으로 추가
$table.prepend($tr1, $tr2);
$("#box").append($table);
});//click end
</script>
</body>
</html>
</tr>, </td>의 닫는태그는 생략해도 자동으로 있는 것으로 인식한다.
요소 생성
'웹개발 교육 > jQuery' 카테고리의 다른 글
| [43일] jQuery (10) - addClass (0) | 2022.09.27 |
|---|---|
| [43일] jQuery (9) - 요소 탐색 (0) | 2022.09.27 |
| [42일] jQuery (7) - this (0) | 2022.09.26 |
| [42일] jQuery (6) - 반복문 (0) | 2022.09.26 |
| [42일] jQuery (5) - 속성 관련 메소드 (0) | 2022.09.26 |
요소를 생성하는 이유
- 문자 단위의 통신에 많이 사용하기 때문(비동기식) -> AJAX
- 댓글의 더보기 등의 무한 스크롤링하기 위해
//요소 생성 및 추가
append(), appendTo() 요소를 끝에 추가
prepend(), prependTo() 요소를 앞에 추가
부모.append(자식)
자식.appendTo(부모)append와 appendTo 모두 요소를 끝에 추가한다는 것은 같은데 어떤 차이가 있을까?
append는 $(a).append(b)라고 작성하면 a뒤에 b가 추가된다.
appendTo는 $(b).append(a)라고 작성하면 b를 a 뒤에 추가한다.
prepend와 prependTo의 차이도 마찬가지이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>08_요소생성.html</title>
<!-- jQuery import -->
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<h3>요소 생성</h3>
<p>
<button id="createBtn">테이블 생성</button>
</p>
<div id="box"></div>
<!--
<table> 요소 element
border 속성 property, attribute
-->
<script>
$("#createBtn").click(function(){
//alert();
//1)
/*
let table = "";
table += "<table border='1'>";
table += "<tr>";
table += " <td>대한민국</td>";
table += "</tr>";
table += "</table>";
//$("#box").html(table); //마크업
//$("#box").text(table); //순수문자열
*/
//2)
let $table = $("<table></tabe>"); //여는태그를 맨위, 닫는태그를 맨아래에 쓸 필요없음
let $tr1 = $("<tr><td>사과</td><td>바나나</td></tr>");
let $tr2 = $("<tr>");
let $td1 = $("<td>수박</td>");
let $td2 = $("<td>").text("메론");
//$tr2 변수에 $td1, $td2를 마지막에 자식으로 추가
$tr2.append($td1, $td2); //수박, 메론
//$table 변수에 자식으로 추가
$table.prepend($tr1, $tr2);
$("#box").append($table);
});//click end
</script>
</body>
</html></tr>, </td>의 닫는태그는 생략해도 자동으로 있는 것으로 인식한다.
요소 생성
'웹개발 교육 > jQuery' 카테고리의 다른 글
| [43일] jQuery (10) - addClass (0) | 2022.09.27 |
|---|---|
| [43일] jQuery (9) - 요소 탐색 (0) | 2022.09.27 |
| [42일] jQuery (7) - this (0) | 2022.09.26 |
| [42일] jQuery (6) - 반복문 (0) | 2022.09.26 |
| [42일] jQuery (5) - 속성 관련 메소드 (0) | 2022.09.26 |
