[jQuery] #7 요소 생성(append, prepend)

1. 요소를 생성하는 이유

 

 제이쿼리로 요소를 생성할 수 있다. 

 그런데 요소를 왜 생성하는 것일까.

 웹은 대체적으로 비동기식 구조에서 주로 사용되기 때문이다.

 무슨 말이냐면 정해진 틀을 벗어나야하는 경우가 많다는 뜻이다.

 

 누군가가 댓글을 보면서 더보기를 눌렀다.

 그러면 HTML 문서상으로 테이블이 늘어나야하고, 그 안에 내용들이 채워져야한다.

 이처럼 정해진 행과 열을 가진 테이블만을 고집하는 사이트에서는 댓글 더보기의 내용을 구현할 수가 없기 때문에 요소를 생성해주는 기능을 활용하는 것이다.

 

 이 요소를 생성하는 방법은 아래와 같다.

 - append(), appendTo()     요소를 끝에 추가
 - prepend(), prependTo()   요소를 앞에 추가
 - 부모.append(자식)
 - 자식.appendTo(부모)

 

 

2. 요소 생성하기

 

 요소를 생성해보자.

 먼저는 요소를 생성하는 메서드를 사용하지 않고 텍스트를 더해가면서 연산을 해보려한다.

let table = "";
table += "<table border='1'>";
table += "<tr>";
table += "  <td>대한민국</td>";
table += "</tr>";
table += "</table>";

$("#box").html(table);

버튼을 누르자 칸이 하나 만들어졌다

 

 

 두번째로는 jQuery 문을 사용하여 만들려고 한다.

let $table  =$("<table></table");

 정말 신기하게도 jQuery는 테이블을 구성하는 html 문법을 자동으로 인식한다.

 그래서 위의 $() 안에 들어가있는 내용을 문자열이 아니라 <table> 명령어로 인식을 한다.

 

// 2)
let $table  =$("<table></table");
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);

 

버튼을 세번 눌러서 완성된 모습

 

 

요소 생성