상세 컨텐츠

본문 제목

[j쿼리] 어펜드 프리펜드 메소드

카테고리 없음

by esoesmio 2023. 5. 24. 19:11

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <style>
table{
    border-collapse : collapse;
}
table,td,th{
    border: 1px solid black;
}
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>번호</th>
        <th>제목</th>
        <th>작성자</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>게시글</td>
        <td>히히히</td>

    </tr>
    </tbody>
</table>
</body>

<script>
let htmlstr = `
 <tr>
 <td>2</td>
 <td>게시글2</td>
 <td>user1</td>
 </tr>
 `
//1. append()
$("tbody").append(htmlstr);
//2. appendto()
htmlstr = `
 <tr>
 <td>3</td>
 <td>게시글3</td>
 <td>user1</td>
 </tr>
 `
$(htmlstr).appendTo("tbody");
//3 prepend
htmlstr = `
 <tr>
 <td>0</td>
 <td>인삿말</td>
 <td>admin</td>
 </tr>
 `
$("tbody").prepend(htmlstr);

//4. prependto()
htmlstr = `
 <tr>
 <td>0</td>
 <td>공지사항</td>
 <td>admin</td>
 </tr>
 `;
$(htmlstr).prependTo("tbody");



</script>
</html>

댓글 영역