Menu Bài Viế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 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ử đượ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

jQuery append()

Phương thức append() chèn nội dung TẠI CUỐI phần tử HTML được chọn.

Ví dụ

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

jQuery prepend()

Phương thức prepend() chèn nội dung TẠI ĐẦU phần tử HTML được chọn.

Ví dụ

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

Thêm một số phần tử mới với append() và prepend()

Trong cả hai ví dụ trên, chúng ta chỉ chèn một số text/HTML ở đầu/cuối của phần tử HTML được chọn.

Tuy nhiên, cả hai phương thức append() và prepend() 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 ra với text/HTML (như chúng ta đã làm trong các ví dụ trên) với jQuery, hoặc với code JavaScript và các phần tử DOM.

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

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
}

jQuery after() và before()

Phương thức after() chèn nội dung SAU phần tử được chọn.

Phương thức before() chèn nội dung TRƯỚC phần tử được chọn.

Ví dụ

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

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

Thêm một số phần tử mới với after() và before()

Tuy nhiên, cả hai phương thức after() và before() 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 ra với text/HTML (như chúng ta đã làm trong các ví dụ trên) với jQuery, hoặc với code JavaScript và các phần tử DOM.

Trong ví dụ sau, chúng ta tạo ra một vài phần tử mới. Các phần tử được tạo ra với text/HTML, jQuery, và JavaScript/DOM. Sau đó ta chèn phần tử mới trước văn bản với phương thức after() (với before() cũng tương tự) :

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