Tạo element với document.createElement() JavaScript

Trong bài viết này, mình xin giới thiệu cách để chúng ta tạo element với document.createElement() trong JavaScript nhé!

document.createElement() JavaScript

Để tạo một element, chúng ta sử dụng method document.createElement(), method này nhận một tagName ví dụ như 'div', 'a', 'p',... chúng là những thẻ (tag) trong HTML mà các bạn thường thấy.

Trước khi tạo element, createElement(tagName) sẽ chuyển tagName có dạng string về chữ in thường, ví dụ: DIV sẽ thành div.

Sau đây, chúng ta cùng xem một ví dụ về cách tạo element với createElement() nhé.

const element = document.createElement("p");

element.innerText = "homiedev"; // thêm text vào thẻ p
element.classList.add('hidden'); // thêm class cho thẻ p

// Thêm element vào DOM sử dụng append() hoặc appendChild()
document.body.append(element);

Sau khi tạo một element, chúng ta có thể chỉnh sửa element này trước hoặc sau khi nó được thêm vào DOM. Ở ví dụ trên mình đã thêm một đoạn text và sử dụng method classList.add để thêm class hidden cho thẻ p. Lúc này, element chưa được thêm vào DOM, để thêm vào DOM các bạn có rất nhiều method để thực hiện. Trong ví dụ trên, mình sử dụng method append() để thêm vào thẻ body.

👉 Để tìm hiểu sự khác nhau giữa append() và appendChild() thì các bạn có thể đọc tại bài viết: Khác nhau giữa append() vs appendChild() JavaScript bạn cần biết.

Trên đây là một cách cơ bản để tạo element. Ngoài ra, createElement() còn nhận thêm đối số thứ 2 là một object với thuộc tính is, nó được dùng để chỉ định tagName của phần tử tùy chỉnh (custom element) được xác định trước đó qua method customElements.define().

Cú pháp: createElement(tagName, options) với options là object với thuộc tính is.

Chúng ta cùng xem một ví dụ để hiểu rõ hơn nhé:

class HomiedevInfo extends HTMLParagraphElement {
  constructor() {
    super();

    this.innerHTML = 
      `<div><a href="https://homiedev.com">Homiedev</a></div>`;
  }
}

// định nghĩa một custom element, extends từ thẻ <p>
customElements.define("homiedev-info", HomiedevInfo, { extends: "p" });

// sử dụng "is" để chỉ định sử dụng một custom element
const element = document.createElement("p", { is: "homiedev-info" });

document.body.append(element);

Ở ví dụ trên, mình tạo một custom element có tên homiedev-info với các thuộc tính có sẵn của thẻ p, để sử dụng thì các bạn có 2 cách đó là:

1. Thông qua thuộc tính is 👉 document.createElement("p", { is: "homiedev-info" })
2. Sử dụng <p is="homiedev-info"></p>

Các bạn có thể đọc bài viết này để hiểu cách custom element nhé.

Trick hay với document.createElement()

Khi tạo một element sử dụng document.createElement(), nếu muốn tùy biến element này thì chúng ta thường làm như sau:

const element = document.createElement("p");

element.innerText = "homiedev"; // thêm text vào thẻ p
element.classList.add('hidden'); // thêm class cho thẻ p

Đây là một cách mà chúng ta thường dùng, với những thuộc tính cơ bản này, nếu có thể thêm luôn vào đối số thứ 2 của createElement() thì nhìn sẽ gọn mà đỡ phải gõ element nhiều lần hơn đúng không 😁. Tuy nhiên đối số thứ 2 của createElement() chỉ chấp nhận thuộc tính is cho nên chúng ta không thể làm như đã nói.

Có một cách để truyền các thuộc tính cơ bản trên như một object, các bạn cùng theo dõi nhé.

const element = Object.assign(document.createElement("div"), {
  classList: "hidden",
  innerText: "homiedev",
});

document.body.append(element);

Cách này cũng khá hay và gọn. Nó hoạt động được là bởi vì bản thân element là một object với các thuộc tính có sẵn như innerText, innerHTML, className,... để thay đổi giá trị thì chúng ta chỉ cần element.className = 'abc'. Do đó, chúng ta có thể sử dụng Object.assign(target, source) nhằm merge giá trị từ source vào target, chỉ đơn giản là vậy thôi ^^.

Nếu muốn sử dụng cách này, các bạn có thể tạo một hàm để reuse như này chẳng hạn:

// util
const createElement = (tagName, properties) => Object.assign(document.createElement(tagName), properties);

// sử dụng
const element1 = createElement("div", {
  className: "color-white",
  innerText: "JavaScript",
});

const element2 = createElement("div", {
  className: "color-white",
  innerHTML: "<div>Read more</div>",
});

document.body.append(element1, element2);

Hi vọng bài viết giúp ích cho các bạn. Nếu thấy hay, các bạn có thể ủng hộ cho blog bằng cách click vào quảng cáo nhé. Cảm ơn các bạn đã đọc bài viết!