Tạo phần tử bằng HTML

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[]

Tạo các phần tử bằng cách sử dụng các thẻ HTML không phải là cách duy nhất để làm điều đó — trên thực tế, có thể tạo, sửa đổi và chèn các phần tử từ JavaScript

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var div = document.createElement['div'];
div.textContent = "Sup, y'all?";
div.setAttribute['class', 'note'];
document.body.appendChild[div];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];

var span = document.createElement['span'];
span.textContent = "Hello!";
div.appendChild[span];