Hướng dẫn create element by html - tạo phần tử bằng html

Nội dung chính Show

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
Cách sử dụng
Loại bỏ phần tử
Thay thế phần tử

Trong một tài liệu HTML, phương thức createElement() tạo ra phần tử HTML được chỉ định bởi

<!DOCTYPE html>
<html>
<head>
    <title>Working with elements</title>
</head>
<body>
    <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

0, hoặc một

<!DOCTYPE html>
<html>
<head>
    <title>Working with elements</title>
</head>
<body>
    <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

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

Cú pháp

var element = document.createElement(tagName);

<!DOCTYPE html>
<html>
<head>
    <title>Working with elements</title>
</head>
<body>
    <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <title>Working with elements</title>
</head>
<body>
    <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

3“) với phương thức này. Khi được gọi, createElement() chuyển đổi tagName thành chữ thường trước khi tạo phần tử. Trong Firefox, Opera và Chrome,

<!DOCTYPE html>
<html>
<head>
    <title>Working with elements</title>
</head>
<body>
    <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

5 hoạt động như

<!DOCTYPE html>
<html>
<head>
    <title>Working with elements</title>
</head>
<body>
    <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

Giá trị trả về

Trả về

<!DOCTYPE html>
<html>
<head>
    <title>Working with elements</title>
</head>
<body>
    <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

7 mới.

Ví dụ

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Working with elements</title>
</head>
<body>
    <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

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

Phương thức createElement() có chức năng tạo một node( hay một thẻ html) với tên node được xác định. Sau khi đã tạo node, ta có thể sử dụng phương thức

<!DOCTYPE html>
<html>
<head>
    <title>Working with elements</title>
</head>
<body>
    <div id="div1">The text above has been created dynamically.</div>
</body>
</html>

9 để tạo nội dung văn bản và gán cho node đó. Cuối cùng sử dụng dụng phương thức

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); 
}

0 hoặc

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); 
}

1 để gắn node vừa được tạo vào trang.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Cú pháp

Cú pháp:

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); 
}

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); 
}

Trong đó:

nodename là tên node sẽ được tạo. Ví dụ div, button, li .vv..là tên node sẽ được tạo. Ví dụ div, button, li .vv..

Cách sử dụng

Tạo thẻ div với nội dung tùy ý và thêm nó vào trang:

Bài viết này được đăng tại [free tuts .net]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

Mình có thêm một chút định dạng để các bạn dễ nhận ra sự thay đổi khi thể div được thêm vào.

Và đây là kết quả:

Tham khảo: w3schools.com

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.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); 
}

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

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); 
}

4 như

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); 
}

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); 
}

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); 
}

7 ...

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); 
}

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

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); 
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

1 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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

Thêm phần tử

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

3 vào phần tử

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); 
}

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

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); 
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

Chèn phần tử

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

3 nằm phía trước

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

Thay thế phần tử

 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";

0 bằng phần tử

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                color: black;
                margin: 10px 0px;
                text-align: center;
                background: red;
                width: 400px;
                height: 50px;
            }
        </style>
    <body>
        <h2>Học lập trình miễn phí tại freetuts.net</h2> 	
        
        <button onclick="myFunction()">Xem kết quả</button>
        <script>
        	function myFunction(){
                var div = document.createElement("div");
                var text = document.createTextNode("Đây là nội dung của thẻ div mới được tạo!");
                div.appendChild(text);
                document.body.appendChild(div);
			}
        </script>
    </body>
</html>

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

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); 
}

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

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); 
}

7 đang có sẵn trong DOM HTML

<div id ="demo">nội dung ví dụ</div>

<button onclick="add_child()">KẾT QUẢ</button>
<script>
   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);
   }
</script>

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

 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";

<div id="demo">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
    var parent = document.getElementById("demo");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

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

 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";

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

 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";

<div id="demo">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
    var child = document.getElementById("p1");
    child.parentNode.removeChild(child);
</script>

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 đó

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); 
}

9 là nút cha

<div id="demo">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    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);
</script>