Làm cách nào để tạo phần tử JavaScript?

Đố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

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

đầ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()

Làm cách nào để tạo tên phần tử trong JavaScript?

Làm cách nào để tạo các phần tử HTML trong JS?

Làm cách nào để tạo phần tử trong JavaScript với lớp?

Làm cách nào để tạo phần tử và nối thêm trong JavaScript?