Làm Việc Với Phần Tử

Trong bài học này bạn sẽ làm quen với các phương thức hỗ trợ tương tác với phần tử trong trang HTML sử dụng thư viện jQuery.

text()

Thuộc tính này để hiển thị văn bản bên trong HTML bao gồm cả văn bản của các phần tử con.

$(function () {
    $("button").click(function (e) {
        alert($("#para").text());
    });
});

Chạy

Bạn cũng có thể thay đổi văn bản bên trong phần tử bằng cách truyền vào một đối số khi gọi phương thức này.

$(function () {
    $("button").click(function (e) {
        $("#para").text("Nội dung phần tử được thay đổi");
    });
});

Chạy

html()

Phương thức html() dùng để hiển thị mã HTML bên trong phần tử bao gồm cả mã HTML của phần tử con.

$(function () {
    $("button").click(function (e) {
        alert($("#para").html());
    });
});

Chạy

Tương tự với phương thức text() phương thức html() cũng có thể được dùng để thay đổi mã HTML của phần tử. Chúng ta làm việc này bằng cách truyền vào một đối số với giá trị là mã lệnh HTML mới của phần tử.

$(function () {
    $("button").click(function (e) {
        $("#para").html("<p>Mã HTML của phần tử được <strong>thay đổi</strong></p>");
    });
});

Chạy

remove()

Phương thức remove() được dùng để xóa phần tử ra khỏi trang HTML. Sau khi phương thức này kết thúc phần tử bị xoá sẽ không còn tồn tại trên trang HTML.

$("button").click(function (e) {
    $("#para").remove();
});

Chạy

append()

Phương thức append() được sử dụng khi bạn muốn thêm một phần tử vào phía sau phần tử cho trước.

$("#para").append("<p>Phần tử mới thêm</p>");

Chạy

prepend()

Phương thức prepend() được sử dụng khi bạn muốn thêm một phần tử vào phía trước phần tử cho trước.

$("#para").prepend("<p>Phần tử mới thêm</p>");

Chạy

insertAfter()

Phương thức insertAfter() được sử dụng để thêm một phần tử vào phía sau phần tử cho trước tuy nhiên cách sử dụng của insertAfter() ngược lại với append(). Hãy xem ví dụ sau:

$( "<p>Phần tử được thêm vào.</p>" ).insertAfter("#para");

Chạy

insertBefore()

Phương thức insertBefore() được sử dụng để thêm một phần tử vào phía trước phần tử cho trước tuy nhiên cách sử dụng của insertBefore() ngược lại với prepend(). Hãy xem ví dụ sau:

$( "<p>Phần tử được thêm vào.</p>" ).insertBefore("#para");

Chạy