TOC

This article is currently in the process of being translated into Vietnamese (~57% done).

DOM manipulation:

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ưn 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ự.

There are variations of the before() and after() methods, called insertBefore() and insertAfter(). They do pretty much the same, but they do it the other way around, so instead of calling them on the elements you wish to insert data before or after, with a parameter of what is to be inserted, you do the exact opposite. Which method to use obviously depends on the situation, but here's an example showing you how to use them both:

<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>

In this example, we insert the items before the span tag, but you could of course do the exact same using after() and insertAfter(), if you wish to insert after the target elemenet. As you can see, the result is the same - only the order of what we do differs.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!