【jQuery】指定した要素の手前にDOMを追加する。

めも。

下記のようなHTMLがあったと仮定。

<table class="table">
<thead>
<tr><th>hoge</th><th>fuga</th><th>piyo</th></tr>
</thead>
<tbody>
<tr><td>data1</td><td>data1</td><td>data1</td></tr>
<tr><td>data2</td><td>data2</td><td>data2</td></tr>
<tr class="target"><td>data3</td><td>data3</td><td>data3</td></tr>
<tr><td>data4</td><td>data4</td><td>data4</td></tr>
<tr><td>data5</td><td>data5</td><td>data5</td></tr>
</tbody>
</table>

<button type="button" class="js_btn">append</button>

ボタンをクリックした時、特定要素(.target)の手前に一行追加したい場合は、下記の通り。

<script>
$(function(){
	$('.js_btn').click(function(){
		var elem = '<tr><td>data999</td><td>data999</td><td>data999</td></tr>';
		$(elem).insertBefore('tr.target');
	})
})
</script>

ちなみに。

$(a).insertBefore(b)、は「b」の手前に「a」が挿入される。
$(a).before(b)、は「a」の手前に「b」が挿入される。