Document: phương thức createElement()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Phương thức createElement() của giao diện Document tạo một HTMLElement mới có localName được chỉ định.

Nếu localName không được nhận dạng, phương thức sẽ tạo một HTMLUnknownElement.

Một chuỗi chỉ định loại phần tử cần tạo. Không sử dụng qualified names (như "html:a") với phương thức này. Khi được gọi trên một tài liệu HTML, createElement() chuyển đổi localName thành chữ thường trước khi tạo phần tử. Trong Firefox, Opera và Chrome, createElement(null) hoạt động giống như createElement("null").

options Optional

Một đối tượng với các thuộc tính tùy chọn sau (lưu ý rằng chỉ một trong is và customElementRegistry có thể được đặt):

is Optional: Một chuỗi xác định tên thẻ cho một custom element đã được định nghĩa trước đó bằng customElements.define(). Phần tử mới sẽ được gán một thuộc tính is có giá trị là tên thẻ của custom element. Xem ví dụ về web component để biết thêm chi tiết.
customElementRegistry Optional: Một CustomElementRegistry thiết lập Scoped custom element registry của một custom element.

Giá trị trả về

Element mới.

Note: Một HTMLElement mới được trả về nếu tài liệu là một HTMLDocument, đây là trường hợp phổ biến nhất. Nếu không, một Element mới sẽ được trả về.

Ngoại lệ

InvalidCharacterError DOMException

Được ném ra nếu giá trị localName không phải là tên phần tử hợp lệ. Một chuỗi là tên phần tử hợp lệ nếu độ dài của nó ít nhất là 1 và:

nó bắt đầu bằng một chữ cái và không chứa khoảng trắng ASCII, NULL, / hoặc > (lần lượt là U+0000, U+002F hoặc U+003E).
nó bắt đầu bằng : (U+003A), _ (U+005F) hoặc bất kỳ ký tự nào trong khoảng U+0080 đến U+10FFFF (bao gồm), và các code point còn lại chỉ bao gồm các ký tự tương tự cùng với các ký tự chữ-số ASCII, - (U+002D) và . (U+002E).

Note: Các phiên bản trước của đặc tả kỹ thuật hạn chế hơn, yêu cầu localName phải là một tên XML hợp lệ.

NotSupportedError DOMException

Được ném ra nếu cả hai tùy chọn is và customElementRegistry đều được chỉ định.

Ví dụ

Ví dụ cơ bản

Ví dụ này tạo một <div> mới và chèn nó trước phần tử có ID div1.

HTML

html

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elements</title>
  </head>
  <body>
    <div id="div1">The text above has been created dynamically.</div>
  </body>
</html>

JavaScript

function addElement() {
  // create a new div element
  const newDiv = document.createElement("div");

  // and give it some content
  const newContent = document.createTextNode("Hi there and greetings!");

  // add the text node to the newly created div
  newDiv.appendChild(newContent);

  // add the newly created element and its content into the DOM
  const currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

addElement();

Kết quả

Ví dụ về web component

Note: Kiểm tra phần tương thích trình duyệt để biết hỗ trợ và tham khảo thuộc tính is để biết các lưu ý về triển khai customized built-in elements.

Đoạn mã ví dụ sau được lấy từ ví dụ expanding-list-web-component của chúng tôi (xem trực tiếp). Trong trường hợp này, custom element của chúng tôi mở rộng HTMLUListElement, đại diện cho phần tử <ul>.

// Create a class for the element
class ExpandingList extends HTMLUListElement {
  constructor() {
    // Always call super first in constructor
    super();

    // constructor definition left out for brevity
    // …
  }
}

// Define the new element
customElements.define("expanding-list", ExpandingList, { extends: "ul" });

Nếu chúng ta muốn tạo một instance của phần tử này theo chương trình, chúng ta sẽ sử dụng một lệnh gọi như sau:

let expandingList = document.createElement("ul", { is: "expanding-list" });

Phần tử mới sẽ được gán một thuộc tính is có giá trị là tên thẻ của custom element.

Note: Để tương thích ngược, một số trình duyệt sẽ cho phép bạn truyền một chuỗi thay vì một đối tượng, trong đó giá trị của chuỗi là tên thẻ của custom element.