jQuery - Thêm phần tử
Với jQuery, có thể 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 các phần tử đã chọnprepend()- Chèn nội dung vào đầu các phần tử đã chọnafter()- Chèn nội dung sau các phần tử đã chọnbefore()- Chèn nội dung trước các phần tử đã chọn
Phương thức jQuery append ()
Phương thức jQuery append()chèn nội dung VÀO CUỐI của các phần tử HTML đã chọn.
Thí dụ
$("p").append("Some appended text.");
Phương thức jQuery prepend ()
Phương thức jQuery prepend()chèn nội dung BƯỚC ĐẦU của các phần tử HTML đã chọn.
Thí dụ
$("p").prepend("Some prepended text.");
Thêm một số yếu tố mới với append () và prepend ()
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 phần tử HTML đã chọn.
Tuy nhiên, cả phương thức append()và prepend()đều có thể nhận 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 (giống như chúng ta đã làm 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 tôi 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 tôi nối các phần tử mới vào văn bản bằng append()phương thức (điều này cũng sẽ hoạt động
prepend()):
Thí 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
}
Phương thức jQuery after () và before ()
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í dụ
$("img").after("Some text after");
$("img").before("Some text before");
Thêm một số yếu tố mới với sau () và trước ()
Ngoài ra, cả phương thức after()và before()đều có thể nhận 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 ta đã 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 tôi 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 tôi chèn các phần tử mới vào văn bản bằng after()phương thức (điều này cũng sẽ hoạt động
before()):
Thí 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>
}
Bài tập jQuery
Tham chiếu HTML jQuery
Để có cái nhìn tổng quan đầy đủ về tất cả các phương thức jQuery HTML, vui lòng truy cập Tham chiếu HTML / CSS jQuery của chúng tôi .