The before() and after() methods

Trong chương trước, chúng ta dùng phương thức append() và prepend() để thêm vào một element, nhưng trong một số trường hợp, chúng ta cần thêm vào trước hay sau một hay vài element nào đó. jQuery có phương thức before() và after() để thực hiện và chúng rất dễ dùng. Hãy xem ví dụ sau:

<a href="javascript:void(0);" onclick="$('input.test1').before('<i>Before</i>');">Before</a>   
<a href="javascript:void(0);" onclick="$('input.test1').after('<b>After</b>');">After</a>

<br /><br />

<input type="text" class="test1" value="Input 1" name="txtInput1" /><br />
<input type="text" class="test1" value="Input 2" name="txtInput2" /><br />

Dựa vào một trong hai liên kết bạn nhấn vào thì thẻ chữ nghiêng hay chữ thường sẽ được đưa vào trước hay sau mỗi element dạng input trong trang theo class "test1". Giống append() và prepend() thì after() và before() cũng cho phép bạn dùng chuỗi HTML, element trong DOM và cả đối tượng jQuery như là tham số với số lượng không giới hạn. Chúng tôi sẽ cho bạn thấy thông qua ví dụ sau:

<a href="javascript:void(0);" onclick="InsertElements();">Insert elements</a>
<br /><br />
<span id="spnTest2">Hello world? </span>

<script type="text/javascript">
function InsertElements()
{
	var element1 = $("<b></b>").text("Hello ");
	var element2 = "<i>there </i>";
	var element3 = document.createElement("u");
	element3.innerHTML = "jQuery!";
	
	$("#spnTest2").after(element1, element2, element3);
}
</script>

Trong ví dụ này, chúng ta tạo ra một đối tượng jQuery, một chuỗi HTML và một element DOM JavaCxript và sau đó chúng ta dùng phương thức after() để đưa chúng vào sau thẻ span. Tất nhiên, phương thức before() có thể dùng tương tự.

Có nhiều dạng phương thức before() và after(), gọi là insertBefore() và insertAfter(). Chúng rất giống nhau nhưng chúng làm theo cách khác, thay vì gọi chúng từ thành phần bạn muốn thêm dữ liệu trước hay sau thì bạn làm ngược lại. Phương thức dùng rõ ràng phụ thuộc vào tình huống, nhưng đây là một ví dụ cho bạn thấy cách dùng cả hai:

<a href="javascript:void(0);" onclick="InsertElementsBefore();">Insert elemenets</a>
<br /><br />
<span id="spnTest3">Hello world? </span>

<script type="text/javascript">
function InsertElementsBefore()
{	
	$("#spnTest3").before($("<i></i>").text("before() "));
	$("<b></b>").text("insertBefore() ").insertBefore("#spnTest3");
}
</script>

Trong ví dụ, chúng ta thêm thành phần trước thẻ span nhưng bạn tất nhiên có thể dung cả after và insertAfter() nếu bạn muốn thêm vào sau thành phần nào đó. Như bạn thấy, kết quả giống nhau - chỉ thứ tự là khác nhau.