Jquery Add Elements

03/10/2019

Bài sau » « Bài trước

Làm thế nào add HTML Content

Với jquery, thì ta có thể dễ dàng add phần tử hoặc nội dung vào tài liệu HTML. Có 4 phương thức jquery để add content như sau:

  • append() - Insert content vào cuối phần tử được chọn.
  • prepend() - Insert content vào đầu phần tử được chọn.
  • after() - Insert content vào phía sau phần tử được chọn.
  • before() - Insert content vào phía trước phần tử được chọn.

Phương thức append() trong jquery

Phương thức append() trong jquery insert content vào cuối phần tử HTML được chọn.

Ví dụ: chèn đoạn text vào cuối thẻ <p> :

<p>Hello World. </p> <button>Append to p</button> <script> $('button').click(function(){ $("p").append("<strong>Appended</strong> text."); }) </script>

Phương thức prepend() trong jquery

Phương thức prepend() trong jquery insert content vào đầu phần tử HTML được chọn.

Ví dụ: chèn đoạn text vào đầu thẻ <p> :

<p>Hello World. </p> <button>Prepend to p</button> <script> $('button').click(function(){ $("p").prepend("Master <strong>FrontEnd</strong>. "); }) </script>

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

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

Tuy nhiên, cả hai phương thức append()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 bằng text /HTML (như đã thực hiện trong các ví dụ ở trên), với jQuery hoặc JavaScript và các phần tử DOM.

Xem các ví dụ dưới đây, chúng ta sẽ tạo 1 số phần tử mới. Phần tử này được tạo bằng text/HTML , jquery và javascript/DOM. Sau đó sử dụng phương thức append() để add vào thẻ <body> (phương thức prepend() cũng áp dụng tương tự ):

function appendText() { var txt1 = "<p>Text.</p>"; // Tạo phần tử bằng text/HTML var txt2 = $("<p></p>").text("Text."); // Tạo phần tử bằng jquery var txt3 = document.createElement("p"); // Tạo phần tử bằng javascript/DOM txt3.innerHTML = "Text."; $("body").append(txt1, txt2, txt3); // Append vào body }

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

Phương thức after() insert content vào phía sau phần tử HTML được chọn.

$("img").after("Text mô tả phía sau thẻ img");

Phương thức before() insert content vào phía trước phần tử HTML được chọn.

$("img").before("Text mô tả phía trước thẻ img");

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

Thêm nữa, cả hai phương thức after()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 bằng text /HTML (như đã thực hiện trong các ví dụ ở trên), với jQuery hoặc JavaScript và các phần tử DOM.

Ví dụ dưới đây, chúng ta sẽ tạo 1 số phần tử mới. Phần tử này được tạo bằng text/HTML , jquery và javascript/DOM. Sau đó sử dụng phương thức after() để add vào thẻ <img> (phương thức before() cũng áp dụng tương tự ):

function appendText() { var txt1 = "<p>Text.</p>"; // Tạo phần tử bằng text/HTML var txt2 = $("<p></p>").text("Text."); // Tạo phần tử bằng jquery var txt3 = document.createElement("p"); // Tạo phần tử bằng javascript/DOM txt3.innerHTML = "Text."; $("img").after(txt1, txt2, txt3); // Append vào sau thẻ img }

Bài sau » « Bài trước
Back to top