Các nhà phát triển chủ yếu muốn các trang web của họ hấp dẫn và làm cho chúng tương tác. Vì mục đích này, các nút được thêm vào trang web. Ví dụ: khi có nhu cầu gửi hoặc nhận dữ liệu, bao gồm các sự kiện nhấp chuột để bổ sung các chức năng cho người dùng khi đăng ký hoặc đăng nhập vào tài khoản. Trong những trường hợp như vậy, các nút cho phép người dùng cuối thực hiện các chức năng khác nhau một cách thông minh.
Blog này sẽ giải thích các phương pháp để tạo các nút trong JavaScript.
Làm thế nào để tạo nút trong JavaScript?
Để tạo nút trong JavaScript, có thể sử dụng các phương pháp sau:
Các cách tiếp cận sau đây sẽ chứng minh từng khái niệm một!
Phương pháp 1: Tạo nút trong JavaScript Sử dụng phương thức “createElement ()” và “appendChild ()”
Các ' createElement () Phương thức 'tạo ra một phần tử và' appendChild () ”Phương thức gắn một phần tử vào phần tử con cuối cùng của một phần tử. Các phương pháp này sẽ được áp dụng để tạo một nút và gắn nó vào Mô hình đối tượng tài liệu (DOM) cần được sử dụng tương ứng.
Cú pháp
tài liệu. createElement ( loại hình )yếu tố. appendChild ( nút )
Trong cú pháp trên, “ loại hình 'Đề cập đến loại phần tử sẽ được tạo bằng phương thức createElement () và' nút ”Là nút sẽ được thêm vào với sự trợ giúp của phương thức appendChild ().
Ví dụ sau sẽ giải thích khái niệm đã nêu.
Thí dụ
Đầu tiên, một “ cái nút ”Sẽ được tạo bằng phương thức document.createElement () và được lưu trữ trong một biến có tên là“ createButton ”:
hăng sô createButton = tài liệu. createElement ( 'cái nút' )Tiếp theo, “ innerText ”Thuộc tính sẽ tham chiếu đến nút đã tạo và đặt giá trị văn bản của nút được chỉ định như sau:
createButton. innerText = 'Nhấp vào đây'Cuối cùng, “ appendChild () ”Phương thức sẽ nối nút đã tạo vào DOM bằng cách tham chiếu đến biến mà nó được lưu trữ dưới dạng đối số:
tài liệu. thân hình . appendChild ( createButton ) ;Kết quả của việc thực hiện ở trên sẽ dẫn đến kết quả như sau:
Phương pháp 2: Tạo Nút trong JavaScript Sử dụng Thuộc tính “Loại” của Thẻ “đầu vào”
Các ' loại hình ”Thuộc tính đại diện cho loại phần tử đầu vào để hiển thị. Nó có thể được sử dụng để tạo một nút bằng cách chỉ định “ cái nút ”Là giá trị của thuộc tính type của thẻ đầu vào.
Cú pháp
< kiểu đầu vào = 'cái nút' >Nơi đây, ' cái nút ”Cho biết loại trường đầu vào.
Hãy xem ví dụ dưới đây.
Thí dụ
Đầu tiên, chúng tôi sẽ sử dụng thẻ đầu vào, chỉ định loại của nó là “ cái nút ”Và đánh giá là“ Nhấp vào đây ”. Kết quả là, một nút sẽ được tạo. Hơn nữa, nó sẽ kích hoạt “ createButton () ”Khi được nhấp vào:
< kiểu đầu vào = giá trị nút = Click_Me onclick = 'createButton ()' >Trong tệp JavaScript, chúng tôi sẽ xác định “ createButton () ”Chức năng này sẽ tạo ra một hộp cảnh báo khi nút được thêm vào sẽ được nhấp vào:
hàm số createButton ( ) {báo động ( 'Đây là một cái nút' )
}
Đầu ra
Các kỹ thuật đã thảo luận để tạo một nút trong JavaScript có thể được sử dụng phù hợp theo yêu cầu.
Sự kết luận
Để tạo một nút trong JavaScript, “ createElement () ' và ' appendChild () ”Có thể áp dụng các phương pháp để tạo một nút và thêm nó vào để sử dụng trong DOM. Một kỹ thuật khác có thể được sử dụng để tạo một nút là xác định kiểu đầu vào và thêm chức năng liên quan. Bài viết này trình bày các phương pháp để tạo một nút trong JavaScript.