Dalam sebuah dokumen HTML, metode document.createElement() membuat elemen HTML yang ditentukan oleh tagName, atau sebuah {{domxref("HTMLUnknownElement")}} jika tagName tidak dikenali.
Catatan: Dalam sebuah dokumen XUL , ini membuat elemen XUL yang ditentukan. Pada dokumen lain, ini membuat sebuah elemen dengan sebuah namespace URI yang null.
var element = document.createElement(tagName[, options]);
tagNametagName. Jangan menggunakan nama yang memenuhi syarat (seperti "html:a") dengan metode ini. Ketika dipanggil pada sebuah dokumen HTML, createElement() mengubah tagName menjadi lower case sebelum membuat elemen. Pada Firefox, Opera, dan Chrome, createElement(null) bekerja seperti createElement("null").options{{optional_inline}}ElementCreationOptions berisi sebuah properti tunggal bernama is, yang nilainya adalah nama tag untuk sebuah elemen khusus yang sebelumnya didefinisikan menggunakan customElements.define(). Lihat {{anch("Web component example")}} untuk lebih jelasnya.Element baru.
Ini membuat sebuah <div> baru dan memasukannya sebelum elemen dengan ID "div1".
<!DOCTYPE html> <html> <head> <title>||Bekerja dengan elemen||</title> </head> <body> <div id="div1">Teks di atas telah dibuat secara dinamis.</div> </body> </html>
document.body.onload = addElement;
function addElement () {
// membuat sebuah elemen div baru
var newDiv = document.createElement("div");
// dan memberikannya sebuah konten
var newContent = document.createTextNode("Hi there and greetings!");
// menambahkan teks terebut ke div yang baru dibuat
newDiv.appendChild(newContent);
// menambah elemen yang baru dibuat berserta isinya ke dalam DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
{{EmbedLiveSample("Basic_example", 500, 50)}}
Contoh cuplikan berikut diambil dari contoh dari expanding-list-web-component kami (lihat juga secara langsung). Dalam kasus ini, elemen khusus kami memperluas {{domxref("HTMLUListElement")}}, yang mewakili elemen {{htmlelement("ul")}}.
// Membuat sebuah kelas untuk elemen
class ExpandingList extends HTMLUListElement {
constructor() {
// Selalu memanggil super dulu di konstruktor
super();
// definisi konstruktor dihilangkan untuk singkatnya
...
}
}
// Mendefinisi elemen baru
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
Jika kita ingin untuk membuat sebuah instance dari elemen ini secara terprogram, kita akan menggunakan sebuah panggilan di sepanjang baris berikut:
let expandingList = document.createElement('ul', { is : 'expanding-list' })
Elemen baru akan diberikan sebuah atribut is yang nilainya adalah nama tag elemen khusus.
Catatan: Untuk kompabilitas ke belakang untuk versi sebelumnya dari Spesifikasi Elemen khusus, beberapa peramban (browser) akan memungkinkan Anda untuk melewatkan sebuah string di sini bukan pada sebuah objek, yang mana nilai string adalah nama tag elemen khusus.
| Spesifikasi | Status | Komentar |
|---|---|---|
| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} |
{{CompatibilityTable}}
| Fitur | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Dukungan dasar | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}}[1][2] | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
argumen options |
{{CompatVersionUnknown}}[3] | {{CompatUnknown}} | {{CompatGeckoDesktop(50)}}[4][5] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Fitur | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Dukungan dasar | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
argumen options |
{{CompatVersionUnknown}} | {{CompatVersionUnknown}}[3] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}}[3] |
[1] Dimulai dengan Gecko 22.0 {{geckoRelease("22.0")}} createElement() tidak lagi menggunakan antarmuka {{domxref("HTMLSpanElement")}} ketika argumennya adalah "bgsounds", "multicol", atau "image". Sebagai gantinya, HTMLUnknownElement digunakan untuk "bgsound" dan "multicol" dan {{domxref("HTMLElement")}} HTMLElement digunakan untuk "image".
[2] Implementasi Gecko dari createElement tidak sesuai dengan spesifikasi DOM untuk dokumen XUL dan XHTML: localName dan namespaceURI tidak diatur ke null pada elemen yang dibuat. Lihat {{ Bug(280692) }} untuk lebih jelasnya.
[3] Pada versi sebelumnya dari spesifikasi, argumen ini hanyalah sebuah string yang nilainyaadalah nama tag elemen khusus. Misalnya bisa saja document.createElement("button", "custom-button") daripada document.createElement("button", {is: "custom-button"}). Demi kompabilitas ke belakang, Chrome menerima kedua bentuk tersebut, meskipun bentuk string sudah usang.
[4] Liat [3] di atas: seperti Chrome, Firefox menerima string, bukan sebuah objek di sini, tetapi hanya dari versi 51 dan seterusnya. Pada versi 50, options harus sebuah objek.
[5] Untuk eksperimen dengan elemen khusus di Firefox, Anda harus mengatur preferensi dom.webcomponents.enabled dan dom.webcomponents.customelements.enabled menjadi true.
createElement() yang belum dimasukan ke dalam DOM), elemen akar subtree diatur sebagai sebuah elemen tingkat-blok. Pada Firefox mesin CSS paralel baru (yang dikenal dengan Quantum CSS atau Stylo, direncanakan untuk dirilis pada Firefox 57), ini diatur sebagai inline, sesuai spesifikasi ({{bug(1374994)}}).