Với jQuery, thật dễ dàng để thêm các phần tử / 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ọnprepend()
- Chèn nội dung vào đầu phần tử được chọnafter()
- Chèn nội dung sau phần tử được chọnbefore()
- Chèn nội dung trước phần tử được chọnPhương thức append()
chèn nội dung TẠI CUỐI phần tử HTML được chọn.
$("p").append("Some appended text.");
Phương thức prepend()
chèn nội dung TẠI ĐẦU phần tử HTML được chọn.
$("p").prepend("Some prepended text.");
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ự) :
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 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.
$("img").after("Some text after");
$("img").before("Some text 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ự) :
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>
}
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Công nghệ ZicZac Việt Nam.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website