Tự học JQuery - HTML - Bài 3 - jQuery – Thêm phần tử

Xem Mục lục lập trình JQuery

Với jQuery, thật dễ dàng thêm mới các phần tử/ nội dung.

Thêm mới nội dung HTML

Chúng ta sẽ xem qua 04 phương thức jQuery được sử dụng để thêm mới nội dung:

• append() - Chèn nội dung vào cuối của phần tử đã chọn.
• prepend() - Chèn nội dung vào đầu của phần tử đã chọn.
• after() - Chèn nội dung sau phần tử đã chọn.
• before() - Chèn nội dung trướ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 PHẦN CUỐI phần tử HTML đã chọn.

Ví dụ:

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

Phương thức jQuery prepend()

Phương thức jQuery prepend() chèn nội dung VÀO PHẦN ĐẦU của phần tử được chọn lựa.

Ví dụ:

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

Thêm nhiều phần tử mới bằng hàm append() và prepend()

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

Tuy nhiên, cả 2 phương thức append() và prepend() đều có thế lấy 01 lượng phần tử HTML tùy ý.

Các phần tử mới có thể là đối tượng tạo bởi text/HTML , jQuery, hoặc JavaScript hoặc phần tử DOM.

Trong ví dụ sau: chúng ta sẽ tạo ra 01 loạt các đối tượng bằng text/HTML, jQuery, và JavaScript/DOM.

Sau đó chúng ta thêm nững phần tử mới vào trang web bằng phương thức append() (cách này cũng xài được với phương thức prepend()) :

Ví dụ:

function appendText() {
    var txt1 = "<p>Text.</p>";               // Tạo các phần tử HTML      var txt2 = $("<p></p>").text("Text.");   // Tạo bằng jQuery    var txt3 = document.createElement("p");  // Tạo bằng DOM    txt3.innerHTML = "Text.";
    $("body").append(txt1, txt2, txt3);      // Thêm phần tử mới}

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

Phương thức jQuery after() chèn nội dung TRƯỚC những phần tử đã chọn.

Phương thức jQuery before() chèn nội dung SAU những phần tử đã chọn.

Ví dụ:

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

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

Thêm nhiều phần tử mới với phương thức after() và before()

Cũng như vậy, cả 02 phương thức after() và before() đều có thể thêm mới 01 lượng phần tử tùy ý.

Những phần tử mới có thể đưuọc tạo bởi text/HTML hoặc jQuery, hoặc mã JavaScript và những phần tử DOM.

Ví dụ:

function afterText() {
    var txt1 = "<b>I </b>";                    // tạo bằng mã HTML      var txt2 = $("<i></i>").text("love ");     // Tạo bằng jQuery    var txt3 = document.createElement("b");    // Tạo bằng DOM    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Chèn vào sau thẻ <img>}

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem Mục lục lập trình JQuery

By #drM