Đối tượng Document cung cấp một phương thức createElement[] để tạo một phần tử và phương thức appendChild[] để thêm nó vào HTML DOM. Sau đây là các bước liên quan đến việc tạo HTML DOM −
Bước 1 - Để chèn một phần tử vào HTML DOM, trước tiên, chúng ta cần tạo một phần tử và nối vào HTML DOM. Tài liệu. createElement[] được sử dụng để tạo phần tử HTML. Cú pháp để tạo một phần tử được hiển thị bên dưới
document.createElement[tagName[, options]];
Ở đâu,
tagName là tên của thẻ sẽ được tạo. thẻ là của
kiểu
tham số tùy chọn là một đối tượng phần tử tùy chọn
Bước 2 – Sau khi tạo thẻ, chúng ta cần tạo văn bản để gán cho thẻ. Cú pháp để tạo một nút văn bản được hiển thị bên dưới
Document.createTextNode[“String”];
Bước 3 – Sau khi tạo văn bản, chúng ta cần thêm văn bản vào phần tử
gõ và do đó cuối cùng thêm vào thẻ div. Cú pháp để nối phần tử vào thẻ được hiển thị bên dưới
appendChild[parameter];
ví dụ 1
Trong ví dụ sau, ban đầu phần div chỉ bao gồm 2 văn bản. Nhưng sau này, một văn bản nữa được tạo và thêm vào phần div như trong đầu ra
Tutorix
Tutorialspoint
Khi thực thi đoạn mã trên, đầu ra sau được tạo
ví dụ 2
Sau đây là chương trình ví dụ về cách thêm phần tử vào HTML DOM. Ở đây, phương thức insertB Before được sử dụng thay cho phương thức append để thêm phần tử vào thẻ div
Trong bài viết này, chúng ta sẽ thảo luận về cách tạo một phần tử HTML thông qua JavaScript. Sau đây, chúng ta sẽ xem một số ví dụ để chèn phần tử đã tạo vào tài liệu
Tạo phần tử bằng HTML không phải là cách duy nhất để tạo phần tử. Tuy nhiên, để đơn giản, nhiều khi chúng ta tạo phần tử trực tiếp trong tài liệu HTML nhưng sử dụng JavaScript thì cũng có thể tạo phần tử
Tài liệu. createElement[] được sử dụng để tạo động một nút phần tử HTML với tên được chỉ định thông qua JavaScript. Phương thức này lấy tên của phần tử làm tham số và tạo nút phần tử đó
Sau khi tạo một phần tử, chúng ta có thể sử dụng phương thức appendChild[] hoặc phương thức insertB Before[] để chèn phần tử đã tạo vào tài liệu
Chúng ta có thể sử dụng phương thức removeChild[] để xóa một nút và cũng có thể sử dụng phương thức replaceChild[] để thay thế nút
cú pháp
Phương thức này chấp nhận một giá trị tham số duy nhất được nêu như sau
Tên nút. Nó là tham số bắt buộc. Tham số này thuộc loại chuỗi. Nó chỉ định tên của phần tử mà chúng ta phải tạo. Tên phần tử được chỉ định trong tham số sẽ tạo phần tử;
Tài liệu. createElement[] sẽ trả về phần tử mới được tạo
Bây giờ, hãy xem một số ví dụ về việc sử dụng tài liệu. phương thức createElement[]. Ở đây, chúng tôi sẽ chỉ ra hai ví dụ. Trong ví dụ đầu tiên, chúng ta sẽ sử dụng phương thức appendChild[] để chèn phần tử vào tài liệu và trong ví dụ thứ hai, chúng ta sẽ sử dụng phương thức insertB Before[] để chèn phần tử được tạo bởi tài liệu. phương thức createElement[]
Ví dụ 1
Trong ví dụ này, chúng tôi đang sử dụng tài liệu. phương thức createElement[] để tạo một phần tử nút mới. Chúng tôi sẽ chèn phần tử đã tạo bằng cách sử dụng phương thức appendChild[]. Ở đây, có một phương thức fun[] sẽ tạo một phần tử nút mới bằng cách sử dụng phương thức createElement[]. Chúng tôi đặt văn bản bằng cách sử dụng InternalHTML sẽ được hiển thị trên đầu nút
Hãy xem ví dụ dưới đây
Kiểm tra nó ngay bây giờđầu ra
Sau khi thực thi đoạn mã trên, đầu ra sẽ là -
Sau khi nhấp vào nút đã cho, đầu ra sẽ là -
Ví dụ2
Trong ví dụ này, chúng tôi đang sử dụng tài liệu. phương thức createElement[] để tạo một phần tử nút mới. Ở đây, chúng tôi đang sử dụng phương thức insertB Before[] để chèn phần tử đã tạo. Có một phần tử div có một phần tử con đoạn văn. Phần tử nút mới sẽ được chèn trước phần tử con đoạn của phần tử div
Hãy xem ví dụ dưới đây
Kiểm tra nó ngay bây giờđầu ra
Sau khi thực thi đoạn mã trên, đầu ra sẽ là -
Sau khi nhấp vào nút trên, đầu ra sẽ là -
Ảnh chụp màn hình ở trên cho thấy phần tử nút mới được chèn trước phần tử đoạn văn. Điều này là do chúng ta đã sử dụng phương thức insertB Before[] để chèn phần tử mới được tạo bằng cách sử dụng tài liệu. phương thức createElement[]