Cách tạo phần tử HTML trong JavaScript

createElement() là một phương thức tích hợp đối tượng tài liệu có chức năng tự động tạo một phần tử HTML từ và trả về phần tử HTML mới được tạo

Cú pháp của createElement() được đưa ra bên dưới

var createdElement = . createElement( HTMLTagName );

createElement() nhận một tham số HTMLTagName là tham số bắt buộc của kiểu chuỗi và nó là tên thẻ của phần tử HTML

Cần lưu ý rằng phương thức createElement() có tạo một phần tử HTML tuy nhiên để gắn phần tử đó vào tài liệu (trang web) chúng ta phải sử dụng các phương thức appendChild() hoặc insertB Before()

Bây giờ chúng ta đã biết phương thức createElement() là gì, chúng ta hãy xem một ví dụ để hiểu rõ hơn về phương thức createElement()

Ví dụ 1

Trong ví dụ này, chúng tôi sẽ tạo một phần tử nút từ JavaScript bằng cách nhấp vào nút đã tồn tại

Trước tiên hãy tạo một nút trong HTML có gắn sự kiện onclick với nó

< cơ thể >

< khi nhấp vào nút = "myFunc()">Magic Buttonbutton>

< script src ="mã. js"> tập lệnh >

cơ thể>body>

Bất cứ khi nào người dùng nhấp vào nút, nó sẽ bắt đầu thực thi chức năng myFunc(). Cuối cùng, chúng tôi đã sử dụng thẻ script và cung cấp nguồn (mã. js) của tệp JavaScript chứa hàm myFunc()

Mã JavaScript được đưa ra dưới đây

function myFunc () {

var myBtn = tài liệu. createElement("nút");

myBtn. innerHTML = "Nút mới";

tài liệu. cơ thể . appendChild( myBtn );

}

Trong đoạn mã trên, đầu tiên, chúng ta đã khởi tạo hàm myFunc() và sau đó tạo một phần tử nút bằng phương thức createElement(). Sau đó, để đặt tiêu đề cho nút, chúng tôi đã sử dụng myBtn. thuộc tính bên trongHTML. Cuối cùng, chúng tôi đã đính kèm nút vào phần thân của HTML bằng phương thức appendChild()

Đầu ra được đưa ra dưới đây

Chúng ta có thể thấy rằng bất cứ khi nào chúng ta nhấp vào nút Magic, nó sẽ tạo ra một nút mới với tiêu đề “New Button”

Ví dụ2

Trong ví dụ này, chúng ta sẽ tạo một thẻ h2 của HTML thông qua javascript và sau đó đính kèm nó với phần thân HTML bằng phương thức insertB Before()

Với mục đích này, trước tiên chúng ta hãy viết mã HTML

< cơ thể >

< div id ="myContainer"><

< p id = "para"><Insert Heading above thisp>

div>div>

< khi nhấp vào nút = "myFunc()">Magic Buttonbutton>

< script src ="mã. js"> tập lệnh >

cơ thể>body>

The rest of the code is the same as example 1 with the exception that now we have created a div element inside which we created a

tag with the id “para”.

Mã JavaScript được đưa ra dưới đây

function myFunc () {

var myContainer = . getElementById("myContainer");

var para = tài liệu. getElementById("para");

var myHeading = tài liệu. createElement("h2");

tiêu đề của tôi. innerHTML = "Tiêu đề mới";

myContainer. insert Before( myHeading , para );

}

Inside the function, we first get the reference of the