• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Element Insert</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <style>
9
        table, tr, td {
10
            border: 2px solid red;
11
            border-collapse: collapse;
12
        }
13
        table { margin-bottom: 15px; }
14
    </style>
15
    <script>
16
        $(function() {
17
            $("button").on("click", function() {
18
                // id가 "secondColumn"인 요소의 바로 앞에 새로운 <td>요소를 추가함.
19
                $("<td>새로운 셀이에요!</td>").insertBefore("#secondColumn");
20
            });
21
        });
22
    </script>
23
</head>
24
​
25
<body>
26
​
27
    <h1>.insertBefore() 메소드</h1>
28
    <table>
29
        <tr>
30
            <td>첫 번째 셀이에요!</td>
31
            <td id="secondColumn">두 번째 셀이에요!</td>
32
        </tr>
33
    </table>
34
    <button>셀 추가</button>
35
36
</body>
37
​
38
</html>