Dalam sebuah dokumen HTML, metode document.createElement() membuat elemen HTML yang ditentukan oleh tagName, atau sebuah  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.

Sintaks

var element = document.createElement(tagName[, options]);

Parameter

tagName
Sebuah string yang menentukan tipe dari elemen yang akan dibuat. nodeName dari elemen dibuat dengan nilai tagName. 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").
optionsOptional
Sebuah objek opsional ElementCreationOptions berisi sebuah properti tunggal bernama is, yang nilainya adalah nama tag untuk sebuah elemen khusus yang sebelumnya didefinisikan menggunakan customElements.define(). Lihat Web component example untuk lebih jelasnya.

Return value

Element baru.

Contoh

Contoh dasar

Ini membuat sebuah <div> baru dan memasukannya sebelum elemen dengan ID "div1".

HTML

<!DOCTYPE html>
<html>
<head>
  <title>||Bekerja dengan elemen||</title>
</head>
<body>
  <div id="div1">Teks di atas telah dibuat secara dinamis.</div>
</body>
</html>

JavaScript

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); 
}

Contoh komponen web

Contoh cuplikan berikut diambil dari contoh dari expanding-list-web-component kami (lihat juga secara langsung). Dalam kasus ini, elemen khusus kami memperluas HTMLUListElement, yang mewakili elemen <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

Spesifikasi Status Komentar
DOM
The definition of 'Document.createElement' in that specification.
Living Standard  

Kompabilitas peramban

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

     
Fitur Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Dukungan dasar (Yes) (Yes) (Yes)[1][2] (Yes) (Yes) (Yes)
argumen options (Yes)[3] ? 50 (50)[4][5] ? ? ?
  
Fitur Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Dukungan dasar (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
argumen options (Yes) (Yes)[3] ? ? ? ? ? (Yes)[3]

[1] Dimulai dengan Gecko 22.0 (Firefox 22.0 / Thunderbird 22.0 / SeaMonkey 2.19) createElement() tidak lagi menggunakan antarmuka HTMLSpanElement ketika argumennya adalah "bgsounds", "multicol", atau "image".  Sebagai gantinya, HTMLUnknownElement digunakan untuk "bgsound" dan "multicol" dan 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.

Catatan Quantum CSS

  • Pada Gecko, ketika Anda membuat sebuah subtree terpisah (misalnya sebuah <div> dibuat menggunakan 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).

Lihat juga

Tag Dokumen dan Kontributor

 Kontributor untuk laman ini: srwicak
 Terakhir diperbarui oleh: srwicak,