jQuery thêm phần tử

Bằng jQuery, bạn 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ẽ học về bốn phương thức của 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ử được chọn
  • after() - Chèn nội dung sau phần tử được chọn
  • before() - Chèn nội dung trước phần tử được chọn

Phương thức append() của jQuery

Phương thức append() của jQuery chèn nội dung vào cuối phần tử được chọn.

Mẫu

$("p").append("Some appended text.");

Thử nghiệm trực tiếp

Phương thức prepend() của jQuery

Phương thức prepend() của jQuery chèn nội dung vào đầu phần tử được chọn.

Mẫu

$("p").prepend("Some prepended text.");

Thử nghiệm trực tiếp

Thêm nhiều phần tử mới bằng phương thức append() và prepend()

Trong ví dụ trên, chúng ta chỉ chèn văn bản/HTML vào đầu hoặc cuối phần tử được chọn.

Tuy nhiên, phương thức append() và prepend() có thể nhận vô số số lượng các phần tử mới thông qua tham số. Bạn có thể tạo văn bản/HTML bằng jQuery (như ví dụ trên) hoặc bằng mã JavaScript và các phần tử DOM.

Trong ví dụ dưới đây, chúng ta tạo một số phần tử mới. Các phần tử này có thể được tạo bằng text/HTML, jQuery hoặc JavaScript/DOM. Sau đó, chúng ta thêm các phần tử mới này vào văn bản bằng phương thức append() (phương thức prepend() cũng tương tự):

Mẫu

function appendText()
{
var txt1="<p>Text.</p>";               // Tạo mới phần tử bằng HTML
var txt2=$("<p></p>").text("Text.");   // Sử dụng jQuery để tạo mới một phần tử
var txt3=document.createElement("p");  // Tạo yếu tố mới thông qua DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Thêm các yếu tố mới
{}

Thử nghiệm trực tiếp

Phương thức after() và before() của jQuery

Phương thức after() của jQuery chèn nội dung sau yếu tố được chọn.

Phương thức before() của jQuery chèn nội dung trước yếu tố được chọn.

Mẫu

$("img").after("Some text after");
$("img").before("Some text before");

Thử nghiệm trực tiếp

Chèn một số yếu tố mới thông qua phương thức after() và before()

Phương thức after() và before() có thể nhận được một số lượng không giới hạn các yếu tố mới làm tham số. Các yếu tố mới có thể được tạo ra thông qua text/HTML, jQuery hoặc JavaScript/DOM.

Trong ví dụ sau, chúng ta tạo ra một số yếu tố mới. Các yếu tố này có thể được tạo ra thông qua text/HTML, jQuery hoặc JavaScript/DOM. Sau đó, chúng ta chèn các yếu tố mới này vào văn bản thông qua phương thức after() (phương thức before() cũng tương tự):

Mẫu

function afterText()
{
var txt1="<b>I </b>";                    // Tạo yếu tố mới thông qua HTML
var txt2=$("<i></i>").text("love ");     // Tạo yếu tố mới thông qua jQuery
var txt3=document.createElement("big");  // Tạo yếu tố mới thông qua DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Chèn các yếu tố mới sau img
{}

Thử nghiệm trực tiếp

Tài liệu tham khảo jQuery HTML

Nếu cần toàn bộ nội dung của phương thức jQuery HTML, hãy truy cập vào tài liệu tham khảo sau: