initial commit

1 files changed, 225 insertions, 0 deletions

diff --git a/files/id/web/api/document/createelement/index.html b/files/id/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..0f14c4e8ce
--- /dev/null
+++ b/files/id/web/api/document/createelement/index.html
@@ -0,0 +1,225 @@
+---
+title: Document.createElement()
+slug: Web/API/Document/createElement
+tags:
+  - API
+  - DOM
+  - Document
+  - Metode
+  - Referensi
+  - createElement
+translation_of: Web/API/Document/createElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Dalam sebuah dokumen <a href="/en-US/docs/Web/HTML">HTML</a>, metode <strong><code>document.createElement()</code></strong> membuat elemen HTML yang ditentukan oleh <code>tagName</code>, atau sebuah  {{domxref("HTMLUnknownElement")}} jika <code>tagName</code> tidak dikenali.</p>
+
+<div class="note">
+<p><strong>Catatan</strong>: Dalam sebuah dokumen <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> , ini membuat elemen XUL yang ditentukan. Pada dokumen lain, ini membuat sebuah elemen dengan sebuah namespace URI yang <code>null</code>.</p>
+</div>
+
+<h2 id="Sintaks">Sintaks</h2>
+
+<pre class="brush: js"><var>var <em>element</em></var> = <var>document</var>.createElement(<em><var>tagName[, options]</var></em>);
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<dl>
+ <dt><code>tagName</code></dt>
+ <dd>Sebuah <em>string</em> yang menentukan tipe dari elemen yang akan dibuat. {{domxref("Node.nodeName", "nodeName")}} dari elemen dibuat dengan nilai <code>tagName</code>. Jangan menggunakan nama yang memenuhi syarat (seperti "html:a") dengan metode ini. Ketika dipanggil pada sebuah dokumen HTML, <code>createElement()</code> mengubah <code>tagName</code> menjadi <em>lower case</em> sebelum membuat elemen. Pada Firefox, Opera, dan Chrome, <code>createElement(null)</code> bekerja seperti <code>createElement("null")</code>.</dd>
+ <dt><code>options</code>{{optional_inline}}</dt>
+ <dd>Sebuah objek opsional <code>ElementCreationOptions</code> berisi sebuah properti tunggal bernama <code>is</code>, yang nilainya adalah nama tag untuk sebuah elemen khusus yang sebelumnya didefinisikan menggunakan <code>customElements.define()</code>. Lihat {{anch("Web component example")}} untuk lebih jelasnya.</dd>
+</dl>
+
+<h3 id="Return_value"><em>Return value</em></h3>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a> baru.</p>
+
+<h2 id="Contoh">Contoh</h2>
+
+<h3 id="Contoh_dasar">Contoh dasar</h3>
+
+<p>Ini membuat sebuah <code>&lt;div&gt;</code> baru dan memasukannya sebelum elemen dengan ID "<code>div1</code>".</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Bekerja dengan elemen||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;Teks di atas telah dibuat secara dinamis.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h4 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h4>
+
+<pre class="brush:js">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);
+}</pre>
+
+<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p>
+
+<h3 id="Contoh_komponen_web">Contoh komponen web</h3>
+
+<p>Contoh cuplikan berikut diambil dari contoh dari <em>expanding-list-web-component</em> kami (lihat juga secara langsung). Dalam kasus ini, elemen khusus kami memperluas {{domxref("HTMLUListElement")}}, yang mewakili elemen {{htmlelement("ul")}}.</p>
+
+<pre>// Membuat sebuah kelas untuk elemen
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Selalu memanggil <em>super</em> dulu di konstruktor
+    super();
+
+    // definisi konstruktor dihilangkan untuk singkatnya
+    ...
+  }
+}
+
+// Mendefinisi elemen baru
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+
+<p>Jika kita ingin untuk membuat sebuah <em>instance</em> dari elemen ini secara terprogram, kita akan menggunakan sebuah panggilan di sepanjang baris berikut:</p>
+
+<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre>
+
+<p>Elemen baru akan diberikan sebuah atribut <code><a href="/en-US/docs/Web/HTML/Global_attributes/is">is</a></code> yang nilainya adalah nama tag elemen khusus.</p>
+
+<div class="note">
+<p><strong>Catatan</strong>: Untuk kompabilitas ke belakang untuk versi sebelumnya dari <a href="https://www.w3.org/TR/custom-elements/">Spesifikasi Elemen khusus</a>, beberapa peramban (<em>browser</em>) akan memungkinkan Anda untuk melewatkan sebuah <em>string</em> di sini bukan pada sebuah objek, yang mana nilai <em>string </em> adalah nama tag elemen khusus.</p>
+</div>
+
+<h2 id="Spesifikasi">Spesifikasi</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spesifikasi</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komentar</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Kompabilitas_peramban">Kompabilitas peramban</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fitur</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Dukungan dasar</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1][2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>argumen <code>options</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[4][5]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fitur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Dukungan dasar</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>argumen <code>options</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Dimulai dengan Gecko 22.0 {{geckoRelease("22.0")}} <code>createElement()</code> tidak lagi menggunakan antarmuka {{domxref("HTMLSpanElement")}} ketika argumennya adalah "bgsounds", "multicol", atau "image".  Sebagai gantinya, <code>HTMLUnknownElement</code> digunakan untuk "bgsound" dan "multicol" dan {{domxref("HTMLElement")}} <code>HTMLElement</code> digunakan untuk "image".</p>
+
+<p>[2] Implementasi Gecko dari <code>createElement</code> tidak sesuai dengan spesifikasi DOM untuk dokumen XUL dan XHTML: <code>localName</code> dan <code>namespaceURI</code> tidak diatur ke <code>null</code> pada elemen yang dibuat. Lihat {{ Bug(280692) }} untuk lebih jelasnya.</p>
+
+<p>[3] Pada versi sebelumnya dari spesifikasi, argumen ini hanyalah sebuah <em>string</em> yang nilainyaadalah nama tag elemen khusus. Misalnya bisa saja <code>document.createElement("button", "custom-button")</code> daripada <code>document.createElement("button", {is: "custom-button"})</code>. Demi kompabilitas ke belakang, Chrome menerima kedua bentuk tersebut, meskipun bentuk <em>string</em> sudah usang.</p>
+
+<p>[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, <code>options</code> harus sebuah objek.</p>
+
+<p>[5] Untuk eksperimen dengan elemen khusus di Firefox, Anda harus mengatur preferensi <code>dom.webcomponents.enabled</code> dan <code>dom.webcomponents.customelements.enabled</code> menjadi <code>true</code>.</p>
+
+<h3 id="Catatan_Quantum_CSS">Catatan Quantum CSS</h3>
+
+<ul>
+ <li>Pada Gecko, ketika Anda membuat sebuah <em>subtree </em>terpisah (misalnya sebuah {{htmlelement("div")}} dibuat menggunakan <code>createElement()</code> yang belum dimasukan ke dalam DOM), elemen akar <em>subtree </em>diatur sebagai sebuah elemen tingkat-blok. Pada Firefox mesin CSS paralel baru (yang dikenal dengan <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> atau <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, direncanakan untuk dirilis pada Firefox 57), ini diatur sebagai <em>inline</em>, sesuai spesifikasi ({{bug(1374994)}}).</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Lihat juga</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("document.createElementNS()")}} — untuk secara eksplisit menentukan namespace URI untuk elemen.</li>
+</ul>