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

document.createElement[tag_name]

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

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

2 ...

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

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ụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

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

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

6 HTML

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

 var linknode = document.createElement["a"];
     linknode.href="//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Ả

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

Thêm phần tử

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

8 vào phần tử

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

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

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }


  This is a paragraph.
  This is another paragraph.



    var parent = document.getElementById["demo"];
    var child = document.getElementById["p1"];
    parent.removeChild[child];

Chèn phần tử

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

8 nằm phía trước


  This is a paragraph.
  This is another paragraph.



    var parent = document.getElementById["demo"];
    var child = document.getElementById["p1"];
    parent.removeChild[child];


  This is a paragraph.
  This is another paragraph.



    var parent = document.getElementById["demo"];
    var child = document.getElementById["p1"];
    parent.removeChild[child];

Thay thế phần tử


  This is a paragraph.
  This is another paragraph.



    var parent = document.getElementById["demo"];
    var child = document.getElementById["p1"];
    parent.removeChild[child];

5 bằng phần tử

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

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

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

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

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

2 đang có sẵn trong DOM HTML

nội dung ví dụ

KẾT QUẢ

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

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.

  




    var parent = document.getElementById["demo"];
    var child = document.getElementById["p1"];
    parent.removeChild[child];


  This is a paragraph.
  This is another paragraph.



    var parent = document.getElementById["demo"];
    var child = document.getElementById["p1"];
    parent.removeChild[child];

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.



    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];

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


  This is a paragraph.
  This is another paragraph.



    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];


  This is a paragraph.
  This is another paragraph.



    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];

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Ả

   function add_child[] {
       //tạo phần tử p    
       var p = document.createElement["p"];

       //tạo phần tử text
       var node = document.createTextNode["Some new text"];

       //gắn node vào p
       p.appendChild[node];
       
       //Thay đổi một số thuộc tính của p
       p.appendChild[node];
       p.style.backgroundColor = 'red';
       p.style.padding = "10px";
       p.style.color = "white";

       var div = document.getElementById["demo"];
       //gắn p vào div
       div.appendChild[p];
   }

4 là nút cha


    This is a paragraph.
    This is another paragraph.

  




    var p = document.createElement["p"];
    p.innerText = 'Đây là đoạn văn mới tạo ra';

    var parent = document.getElementById["demo"];
    var child = document.getElementById["p1"];
    parent.replaceChild[p, child];

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


  This is a paragraph.
  This is another paragraph.



    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];

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


  This is a paragraph.
  This is another paragraph.



    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];

4, hoặc một


  This is a paragraph.
  This is another paragraph.



    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];

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.



    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];

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.

  




    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];

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


  This is a paragraph.
  This is another paragraph.



    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];

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.



    var child = document.getElementById["p1"];
    child.parentNode.removeChild[child];

9 hoạt động như


    This is a paragraph.
    This is another paragraph.



    var p = document.createElement["p"];
    p.innerText = 'Đây là đoạn văn mới tạo ra';

    var parent = document.getElementById["demo"];
    var child = document.getElementById["p1"];
    parent.replaceChild[p, child];

Giá trị trả về

Trả về


    This is a paragraph.
    This is another paragraph.



    var p = document.createElement["p"];
    p.innerText = 'Đây là đoạn văn mới tạo ra';

    var parent = document.getElementById["demo"];
    var child = document.getElementById["p1"];
    parent.replaceChild[p, child];

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

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

Toplist mới

Bài mới nhất

Chủ Đề