Thêm CSS bằng JS

Tương tự, thay đổi thuộc tính href trong phần tử liên kết

Some link

Như vậy bạn thấy thông qua JavaScript bạn có thể thay đổi mọi thuộc tính của phần tử HTML

Đổi style phần tử (CSS)

Some link

Some link

Nội dung Ví dụ

Ví dụ trên đã thay đổi

Some link

Some link

Some link

Tất cả các thuộc tính

Some link

Some link

Some link

Some link

Some link

Nội dung Ví dụ

Nội dung Ví dụ

Nội dung Ví dụ

Bạn có thể dùng JavaScript để tạo mới phần từ HTML sau đó chèn vào trang web. Đây là các cách giúp bạn tạo mới một phần tử HTML

nội dung ví dụ

KẾT QUẢ

nội dung ví dụ




KẾT QUẢ

nội dung ví dụ

KẾT QUẢ

nội dung ví dụ

KẾT QUẢ

 var node     = document.createTextNode("Tạo ra một phần tử");

 var linknode = document.createElement("a");
     linknode.href="https://xuanthulab.net/";
     linknode.innerText="xuanthulab.net";

Ví dụ trên sẽ tạo ra một nút text, nhưng nó chưa hiện thị cho đến khi bạn gắn phần tử đó vào HTML document để nó là phần tử con của một phần tử nào đó, có một số cách để gắn phần tử tạo ra từ JavaScript vào DOM HTML

nội dung ví dụ

KẾT QUẢ

nội dung ví dụ

KẾT QUẢ

nội dung ví dụ

KẾT QUẢ

nội dung ví dụ

KẾT QUẢ

nội dung ví dụ

KẾT QUẢ

nội dung ví dụ

KẾT QUẢ

  
This is a paragraph.
  
This is another paragraph.

  
This is a paragraph.
  
This is another paragraph.

  
This is a paragraph.
  
This is another paragraph.

nội dung ví dụ

KẾT QUẢ

Ví dụ sau tạo ra một phần tử đoạn văn p sau đó chèn nó vào phần tử div đang có sẵn trong DOM HTML

nội dung ví dụ

KẾT QUẢ

Loại bỏ phần tử

Để loại bỏ phần tử HTML, bạn chọn phần tử cha rồi sử dụng phương thức

  
This is a paragraph.
  
This is another paragraph.

  
This is a paragraph.
  
This is another paragraph.

Ví dụ trên sẽ xóa bỏ phần tử đoạn văn thứ nhất

Bạn có thể sử dụng thủ thuật lấy thuộc tính

  
This is a paragraph.
  
This is another paragraph.

  
This is a paragraph.
  
This is another paragraph.

  
This is a paragraph.
  
This is another paragraph.

Thay thế phần tử

Để thay thể một phần tử bằng một phần tử khác dùng cú pháp element.replaceChild(newNode, oldNode). Trong đó

nội dung ví dụ

KẾT QUẢ