Hướng dẫn create html document javascript - tạo tài liệu html javascript

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 chính Show

Loại bỏ phần tử
Thay thế phần tử
Tính tương thích của trình duyệt web
Trình duyệt trên máy tính
Internet Eplorer

document.createElement(tag_name)

tạo ra phần tử có thẻ tag_name như

nội dung ví dụ

nội dung ví dụ

nội dung ví dụ

2 ...

nội dung ví dụ

Tạo ra một phần tử bằng cách nhân bản phần tử chỉ ra (

nội dung ví dụ

nội dung ví dụ

tạo phần tử tử văn bản

nội dung ví dụ

6 HTML

 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ụ

Thêm phần tử

nội dung ví dụ

8 vào phần tử

nội dung ví dụ

4 nó trở thành phần tử con sau cùng của

nội dung ví dụ


  This is a paragraph.
  This is another paragraph.

Chèn phần tử

nội dung ví dụ

8 nằm phía trước


  This is a paragraph.
  This is another paragraph.


  This is a paragraph.
  This is another paragraph.

Thay thế phần tử


  This is a paragraph.
  This is another paragraph.

5 bằng phần tử

nội dung ví dụ

Ví dụ sau tạo ra một phần tử đoạn văn

nội dung ví dụ

1 sau đó chèn nó vào phần tử

nội dung ví dụ

2 đang có sẵn trong DOM HTML

nội dung ví dụ

nội dung ví dụ

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.

0 để bỏ qua bước tìm phần tử cha trong DOM:


  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ụ

4 là nút cha


    This is a paragraph.
    This is another paragraph.

Hướng dẫn create html document javascript - tạo tài liệu html javascript

Trong một tài liệu HTML, phương thức


  This is a paragraph.
  This is another paragraph.

3 tạo ra phần tử HTML được chỉ định bởi


  This is a paragraph.
  This is another paragraph.

4, hoặc một


  This is a paragraph.
  This is another paragraph.

5 nếu tagName không được nhận ra.

Cú pháp

var element = document.createElement(tagName);


  This is a paragraph.
  This is another paragraph.

Là thẻ HTML mà bạn muốn tạo mới. Không sử dụng tên đủ điều kiện (như “


  This is a paragraph.
  This is another paragraph.

7“) với phương thức này. Khi được gọi,


  This is a paragraph.
  This is another paragraph.

3 chuyển đổi tagName thành chữ thường trước khi tạo phần tử. Trong Firefox, Opera và Chrome,


  This is a paragraph.
  This is another paragraph.

9 hoạt động như


    This is a paragraph.
    This is another paragraph.

Giá trị trả về

Trả về


    This is a paragraph.
    This is another paragraph.

1 mới.

Ví dụ

HTML




    Working with elements


    The text above has been created dynamically.

JavaScript

document.body.onload = addElement;

function addElement () { 
    // create a new div element 
    var newDiv = document.createElement("div"); 
    // and give it some content 
    var newContent = document.createTextNode("Hi there and greetings!"); 
    // add the text node to the newly created div
    newDiv.appendChild(newContent);  

    // add the newly created element and its content into the DOM 
    var currentDiv = document.getElementById("div1"); 
    document.body.insertBefore(newDiv, currentDiv); 
}

Kết quả

Tính tương thích của trình duyệt web

Trình duyệt trên máy tính

Trình duyệt	Tương thích
Chrome	Có
Edge	Có
Edge	Có
Edge	Có
Edge	Có
Edge	Có

Edge

Trình duyệt	Tương thích
Chrome	Có
Edge	Có
Edge	Có
Edge	Có
Edge	Có
Edge	Có
Edge	FireFox

Internet Eplorer

Opera
Safari

Hướng dẫn create html document javascript - tạo tài liệu html javascript

Loại bỏ phần tử

Thay thế phần tử

Cú pháp

Ví dụ

Tính tương thích của trình duyệt web

Trình duyệt trên máy tính

Edge

Internet Eplorer

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội