initial commit

1 files changed, 166 insertions, 0 deletions

diff --git a/files/vi/web/api/node/insertbefore/index.html b/files/vi/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..f60a35f3e7
--- /dev/null
+++ b/files/vi/web/api/node/insertbefore/index.html
@@ -0,0 +1,166 @@
+---
+title: Node.insertBefore()
+slug: Web/API/Node/insertBefore
+translation_of: Web/API/Node/insertBefore
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Phương thức </span></font><strong>Node.insertBefore()</strong></code>  chèn một nút trước nút tài liệu tham khảo như một đối tượng con của một đối tượng gốc (đối tượng bố mẹ) cụ thể . Nếu đối tượng con đã cho là một tham chiếu tới tới một đối tượng node đang tồn tại trong tài liệu  , <code>insertBefore()</code> chuyển nó từ vị trí hiện tại  tới vị trí mới (không có yêu cầu nào phải xoá cái nút từ node gốc của nó trước khi thêm nó vào mấy nút khác).</p>
+
+<p>Vậy có nghĩa là một node thì không thể đồng thời ở tại hai điểm của tài liệu . Vậy, nếu node đã có nguồn gốc của nó rồi thì đối tượng node  sẽ bị chuyển đi trước tiên rồi sau đó bị chèn vào ở vị trí mới . {{domxref("Node.cloneNode()")}} có thể được sử dụng để tạo một bản sao của đối tượng  node trước khi thêm nó vào dưới phần tử gốc mới. Hãy lưu ý rằng những bản sao được tạo nên cùng <code>cloneNode()</code> sẽ không được tự động đồng bộ hoá.</p>
+
+<p>Nếu tài liệu ttham chiếu node là <code>null thì</code> node cụ thể được thêm vào đuôi của danh sách tập con của đối tượng node gốc.</p>
+
+<p>Nếu đối tượng  con đã cho là một {{domxref("DocumentFragment")}} thì toàn bộ nội dung của <code>DocumentFragment</code>  sẽ được chuyển đến danh sách tập con của đối tượng gốc cụ thể.</p>
+
+<h2 id="Cú_pháp">Cú pháp</h2>
+
+<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>);
+</pre>
+
+<ul>
+ <li><code>insertedNode</code> đối tượng node đã bị chèn vào bởi <code>newNode</code></li>
+ <li><code>parentNode</code> đối tượng phần tử gốc mới được chèn node vào.</li>
+ <li><code>newNode</code> đối tượng node bị chèn</li>
+ <li><code>referenceNode</code> đối tượng node lúc trước mà <code>newNode</code>  bị chèn vào.</li>
+</ul>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Nếu </span></font>referenceNode</code> là <code>null</code> thì <code>newNode</code> isẽ được chèn vào đuôi của danh sách các đối tượng tập con nodes .</p>
+
+<div class="note">
+<p><code>referenceNode</code>  <strong>không phải </strong> là một tham số  có thể tuỳ chọn -- bạn phải đưa ra một <code>Node</code> hoặc  <code>null</code>. Việc cung cấp nó thất bại hoặc đưa ra những giá trị không hợp lệ có thể sẽ <a href="https://code.google.com/p/chromium/issues/detail?id=419780">behave</a>  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">differently</a>( hành xử khác nhau) trong mỗi phiên bản công cụ tìm kiếm khác nhau.</p>
+</div>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Giá trị được trả về sẽ là một phần tử con trừ khi <code>newNode</code> là một {{domxref("DocumentFragment")}}, trong trường hợp {{domxref("DocumentFragment")}} rỗng được trả về.</p>
+
+<h2 id="Ví_dụ">Ví dụ</h2>
+
+<h3 id="Example_1">Example 1</h3>
+
+<pre class="brush: html">&lt;div id="parentElement"&gt;
+   &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Create the new node to insert
+var newNode = document.createElement("span");
+
+// Get a reference to the parent node
+var parentDiv = document.getElementById("childElement").parentNode;
+
+// Begin test case [ 1 ] : Exist a childElement --&gt; All working correctly
+var sp2 = document.getElementById("childElement");
+parentDiv.insertBefore(newNode, sp2);
+// End test case [ 1 ]
+
+// Begin test case [ 2 ] : childElement is of Type undefined
+var sp2 = undefined; // Not exist a node of id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
+// End test case [ 2 ]
+
+// Begin test case [ 3 ] : childElement is of Type "undefined" ( string )
+var sp2 = "undefined"; // Not exist a node of id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument"
+// End test case [ 3 ]
+&lt;/script&gt;
+</pre>
+
+<h3 id="Example_2">Example 2</h3>
+
+<pre class="brush:html">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Create a new, plain &lt;span&gt; element
+var sp1 = document.createElement("span");
+
+// Get a reference to the element, before we want to insert the element
+var sp2 = document.getElementById("childElement");
+// Get a reference to the parent element
+var parentDiv = sp2.parentNode;
+
+// Insert the new element into the DOM before sp2
+parentDiv.insertBefore(sp1, sp2);
+&lt;/script&gt;</pre>
+
+<p>Không hề có phương thức <span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">insertAfter()</code><span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> nào cả. Nó có thể được mô phỏng bởi phương thức  </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">insertBefore</code><span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> cùng với {{domxref("Node.nextSibling")}}.</span></p>
+
+<p>Trong ví dụ trước, <code>sp1</code> đã chèn được vào sau  <code>sp2</code> bằng cách dùng :</p>
+
+<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
+
+<p>Nếu <code>sp2</code> không có đối tượng anh em nào tiếp nữa , thì nó hẳn phải là đối tượng con cuối cùng — <code>sp2.nextSibling</code> trả về <code>null</code>, và <code>sp1</code> sẽ được chèn vào cuối cùng của danh sách tập node con (ngay sau <code>sp2</code>).</p>
+
+<h3 id="Example_3">Example 3</h3>
+
+<p>Chèn một phần tử vào phần tử con đứng đầu bằng cách dùng đặc tính <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p>
+
+<pre class="brush:js">// Get a reference to the element in which we want to insert a new node
+var parentElement = document.getElementById('parentElement');
+// Get a reference to the first child
+var theFirstChild = parentElement.firstChild;
+
+// Create a new element
+var newElement = document.createElement("div");
+
+// Insert the new element before the first child
+parentElement.insertBefore(newElement, theFirstChild);</pre>
+
+<p class="brush:js">Khi phần tử không có con cả (đối tượng con đầu tiên) thì  <code>firstChild</code> là <code>null</code>. Phần tử vẫn được thêm vào bố mẹ đối tượng gốc, sau con út (đối tượng con cuối cùng). Bởi bố mẹ không có con cả nên nó cũng không có con út luôn. Như vậy, phần tử mới sẽ là phần tử duy nhất sau việc chia cắt.</p>
+
+<h2 id="Khả_năng_tương_thích_của_công_cụ_tìm_kiếm">Khả năng tương thích của công cụ tìm kiếm</h2>
+
+<div class="hidden">Mục khả năng tương thích trên trang này được tạo bởi dữ liệu được kết cấu. Nếu bạn muốn đóng góp tới dữ liệu, xin hãy truy cập thử <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> và gửi một pull request cho chúng tôi.</div>
+
+<p>{{Compat("api.Node.insertBefore")}}</p>
+
+<h2 id="Chi_tiết">Chi tiết</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Fixes errors in the insertion algorithm</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Describes the algorithm in more detail</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No notable changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No notable changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Introduced</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Xem_thêm">Xem thêm</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+</ul>