Trong tài liệu HTML, phương thức document.createElement[]
tạo phần tử HTML được chỉ định bởi tagname hoặc HTMLUnknownElement
nếu tagname không được nhận ra.document.createElement[]
method creates the HTML element specified by tagName, or an HTMLUnknownElement
if tagName isn't recognized.Cú pháp
createElement[tagName]
createElement[tagName, options]
Thông số
tagName
Một chuỗi chỉ định loại phần tử sẽ được tạo. nodeName
của phần tử được tạo được khởi tạo với giá trị của tagname. Không sử dụng tên đủ điều kiện [như "HTML: A"] với phương pháp này. Khi được gọi trên tài liệu HTML, createElement[]
chuyển đổi TagName thành CASED CASE trước khi tạo phần tử. Trong Firefox, Opera và Chrome,
DOCTYPE html>
Working with elements
The text above has been created dynamically.
0 hoạt động như DOCTYPE html>
Working with elements
The text above has been created dynamically.
1.DOCTYPE html>
Working with elements
The text above has been created dynamically.
2 Tùy chọnOptionalMột đối tượng với các thuộc tính sau:
DOCTYPE html>
Working with elements
The text above has been created dynamically.
3Tên thẻ của một phần tử tùy chỉnh được xác định trước đó thông qua
DOCTYPE html>
Working with elements
The text above has been created dynamically.
4. Xem ví dụ thành phần web để biết thêm chi tiết.Giá trị trả về
DOCTYPE html>
Working with elements
The text above has been created dynamically.
5 mới.Lưu ý: Một htmlelement mới được trả về nếu tài liệu là một htmldocument, là trường hợp phổ biến nhất. Nếu không thì một yếu tố mới được trả về. A new HTMLElement is returned if the document is an HTMLDocument, which is the most common case. Otherwise a new Element is returned.
Ví dụ
Ví dụ cơ bản
Điều này tạo ra một
DOCTYPE html>
Working with elements
The text above has been created dynamically.
6 mới và chèn nó trước phần tử với ID "DOCTYPE html>
Working with elements
The text above has been created dynamically.
7".HTML
DOCTYPE html>
Working with elements
The text above has been created dynamically.
JavaScript
document.body.onload = addElement;
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];
}
Kết quả
Ví dụ thành phần web
Đoạn trích ví dụ sau đây được lấy từ ví dụ thành phần Danh sách mở rộng của chúng tôi [xem nó cũng trực tiếp]. Trong trường hợp này, phần tử tùy chỉnh của chúng tôi mở rộng
DOCTYPE html>
Working with elements
The text above has been created dynamically.
8, đại diện cho phần tử DOCTYPE html>
Working with elements
The text above has been created dynamically.
9.// 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 tôi muốn tạo một thể hiện của phần tử này theo chương trình, chúng tôi sẽ sử dụng một cuộc gọi dọc theo các dòng sau:
let expandingList = document.createElement["ul", { is: "expanding-list" }];
Phần tử mới sẽ được cung cấp một thuộc tính
DOCTYPE html>
Working with elements
The text above has been created dynamically.
3 có giá trị là tên thẻ của phần tử tùy chỉnh.Lưu ý: Để có khả năng tương thích ngược với các phiên bản trước của đặc tả các phần tử tùy chỉnh, một số trình duyệt sẽ cho phép bạn truyền một chuỗi ở đây thay vì một đối tượng, trong đó giá trị của chuỗi là tên thẻ của phần tử tùy chỉnh. For backwards compatibility with previous versions of the Custom Elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.
Thông số kỹ thuật
DOM Standard # Ref-for-Dom-Domument-Createelement① # ref-for-dom-document-createelement① |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt