jQuery - Thêm phần tử
Với jQuery, thật dễ dàng để thêm các phần tử/nội dung mới.
Thêm nội dung HTML mới
Chúng ta sẽ xem xét bốn phương thức jQuery được sử dụng để thêm nội dung mới:
-
append()- Chèn nội dung vào cuối phần tử được chọn -
prepend()- Chèn nội dung vào đầu phần tử đã chọn -
after()- Chèn nội dung sau các phần tử đã chọn -
before()- Chèn nội dung trước các phần tử được chọn
Phương thức nối thêm () của jQuery
Phương thức jQuery append() chèn nội dung TẠI CUỐI của các phần tử HTML đã chọn.
Phương thức trả trước() của jQuery
Phương thức jQuery prepend() chèn nội dung TẠI BẮT ĐẦU của các phần tử HTML đã chọn.
Thêm một số phần tử mới với phần bổ sung () và phần trả trước ()
Trong cả hai ví dụ trên, chúng tôi chỉ chèn một số văn bản/HTML vào đầu/cuối của các thành phần HTML đã chọn.
Tuy nhiên, cả hai phương thứcappend append() và prepend() đều có thể lấy vô số phần tử mới làm tham số. Các phần tử mới có thể được tạo bằng văn bản/HTML (như chúng tôi đã thực hiện trong các ví dụ ở trên), bằng jQuery hoặc bằng mã JavaScript và các phần tử DOM.
Trong ví dụ sau, chúng ta tạo một số phần tử mới. Các phần tử được tạo bằng văn bản/HTML, jQuery và JavaScript/DOM. Sau đó, chúng ta nối các phần tử mới vào văn bản bằng phương thứcappend append() (điều này cũng có tác dụng với prepend() ):
Ví dụ
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}Hãy tự mình thử »Các phương thức after() và before() của jQuery
Phương thức jQuery after() chèn nội dung SAU các phần tử HTML đã chọn.
Phương thức jQuery before() chèn nội dung TRƯỚC các phần tử HTML đã chọn.
Thêm một số phần tử mới với after() và before()
Ngoài ra, cả hai phương thức after() và before() đều có thể lấy vô số phần tử mới làm tham số. Các phần tử mới có thể được tạo bằng văn bản/HTML (như chúng tôi đã làm trong ví dụ trên), bằng jQuery hoặc bằng mã JavaScript và các phần tử DOM.
Trong ví dụ sau, chúng ta tạo một số phần tử mới. Các phần tử được tạo bằng văn bản/HTML, jQuery và JavaScript/DOM. Sau đó, chúng ta chèn các phần tử mới vào văn bản bằng phương thức after() (điều này cũng có tác dụng với before() ):
Ví dụ
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
} Hãy tự mình thử »bài tập jQuery
Tài liệu tham khảo HTML của jQuery
Để có cái nhìn tổng quan đầy đủ về tất cả các phương thức HTML của jQuery, vui lòng truy cập Tài liệu tham khảo HTML/CSS jQuery của chúng tôi.
