FRONT-END/JQUERY
[jQuery] append(), prepend(), attr()
썬키
2023. 2. 5. 18:29
append(), prepend()
위와 같은 table이 있고 데이터 추가 버튼을 클릭했을 때 입력한 데이터를 테이블에 추가하려면
jQuery의 append() 함수를 이용하면 손쉽게 테이블에 데이터를 추가할 수 있다.
1. 코드
<script type="text/javascript">
$(document).ready( () => {
$("#btn").click( () => {
let no = $("#no").val();
let title = $("#title").val();
let author = $("#author").val();
let ymd = $("#ymd").val();
$("table").append(
$("<tr>").append(
$("<th>").append(no),
$("<td>").append(title),
$("<td>").append(author),
$("<td>").append(ymd)
)
);
});
});
</script>
위의 코드처럼, append() 함수는 일치하는 요소 세트(예제에서는 <table>)의 각 요소 끝에
마지막 자식으로 매개변수에 지정된 콘텐츠를 삽입하는 함수이다.
반대로, 첫 번째 자식으로 삽입하려면 prepend() 함수를 사용하면 된다.
2. 실행
이처럼, <input>에 데이터를 입력하고 데이터 추가 버튼을 클릭하면
테이블에 데이터가 잘 삽입된 것을 확인할 수 있다.
2.1 prepend() 실행
$("table").prepend(
$("<tr>").append(
$("<th>").append(no),
$("<td>").append(title),
$("<td>").append(author),
$("<td>").append(ymd)
)
);
attr()
각 태그마다 Attribute가 존재한다. 예를 들면 <img> 에는 src, alt, title...이 있고
<input>에는 type, id, name... 이 있는데 attr() 함수는 각 태그의 Attribute 값을 조작하거나 가져올 수 있다.
1. 코드
<body>
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
The title of the emphasis is:<div></div>
<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>
</body>
위의 예제는 <em>에 title이라는 Attribute의 값을 title 변수에 저장하고 <div>에 title을 삽입하는 코드이다.
2. 실행
원본 코드와 비교해보면 <div>에 내용이 삽입된 것을 확인할 수 있다.