Document: phương thức createElementNS()
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 createElementNS() của giao diện Document tạo một phần tử mới với URI namespace và qualified name được chỉ định.
Phương thức này hữu ích trong các tài liệu đa namespace, chẳng hạn như SVG hoặc MathML được nhúng trong HTML, nơi parser không thể suy luận đáng tin cậy namespace.
Phương thức createElement() đơn giản hơn nếu bạn muốn tạo một phần tử HTML thông thường.
Cú pháp
createElementNS(namespaceURI, qualifiedName)
createElementNS(namespaceURI, qualifiedName, options)
Tham số
namespaceURI-
Một chuỗi chỉ định
namespaceURIđể liên kết với phần tử. Một số URI namespace quan trọng là: qualifiedName-
Một chuỗi chứa qualified name của phần tử mới. Thuộc tính
nodeNamecủa phần tử được tạo được khởi tạo với giá trị này.Định dạng của qualified name là
prefix:localNamehoặclocalName, trong đó các phần được định nghĩa là:prefixOptional-
Một "bí danh ngắn" cho namespace. Tiền tố là tùy chọn, nhưng nếu được chỉ định thì tham số
namespaceURIcũng phải được chỉ định. Nếu tiền tố được đặt thànhxmlhoặcxmlns, thìnamespaceURIphải được đặt thànhhttp://www.w3.org/XML/1998/namespacehoặchttp://www.w3.org/2000/xmlns/, tương ứng.Giá trị được sử dụng để khởi tạo thuộc tính
prefixcủa phần tử mới. Mặc định lànull. localName-
Tên cục bộ của phần tử. Giá trị được sử dụng để khởi tạo thuộc tính
localNamecủa phần tử mới.
optionsOptional-
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
isvàcustomElementRegistrycó thể được đặt):isOptional-
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ínhiscó giá trị là tên thẻ của custom element. customElementRegistryOptional-
Một
CustomElementRegistrythiết lập Scoped custom element registry của một custom element.
Để tương thích ngược, một số trình duyệt 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. Xem Mở rộng các phần tử HTML gốc để biết thêm thông tin về cách sử dụng tham số này.
Giá trị trả về
Element mới.
Ngoại lệ
NamespaceErrorDOMException-
Được ném ra nếu giá trị
namespaceURIlà:- không phải là URI namespace hợp lệ.
- được đặt thành chuỗi rỗng khi
prefixcó giá trị. - không phải là giá trị
http://www.w3.org/XML/1998/namespacehoặchttp://www.w3.org/2000/xmlns/khiprefixđược đặt thànhxmlhoặcxmlns, tương ứng.
InvalidCharacterErrorDOMException-
Được ném ra nếu
prefixhoặclocalNamekhông hợp lệ:prefixphải có ít nhất một ký tự và không được chứa khoảng trắng ASCII,NULL,/hoặc>(lần lượt là U+0000, U+002F hoặc U+003E).localNamelà tên phần tử hợp lệ nếu nó có độ dài í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).
- nó bắt đầu bằng một chữ cái và không chứa khoảng trắng ASCII,
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
qualifiedNamephải là một tên XML hợp lệ. NotSupportedErrorDOMException-
Được ném ra nếu cả hai tùy chọn
isvàcustomElementRegistryđều được chỉ định.
Ví dụ
Sử dụng cơ bản
Ví dụ này cho thấy cách tạo một phần tử <div> mới trong namespace XHTML.
const divElementXHTML = document.createElementNS(
"http://www.w3.org/1999/xhtml",
"div",
);
// This is equivalent!
const divElementHTML = document.createElement("div");
Tạo một phần tử SVG
Ví dụ này cho thấy cách bạn có thể tạo một phần tử SVG (SVGSVGElement) và thêm nó vào phần tử <body> HTML.
Sử dụng createElementNS() với namespace SVG là cần thiết khi làm việc với tài liệu HTML.
Nếu bạn gọi createElement("svg"), một HTMLUnknownElement sẽ được trả về và SVG sẽ không được kết xuất.
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
const circle = document.createElementNS(svgNS, "circle");
circle.setAttribute("cx", "50");
circle.setAttribute("cy", "50");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "steelblue");
svg.appendChild(circle);
document.body.appendChild(svg);
Đặc tả kỹ thuật
| Specification |
|---|
| DOM # ref-for-dom-document-createelementns① |