--- title: Node.insertBefore() slug: Web/API/Node/insertBefore translation_of: Web/API/Node/insertBefore ---
{{APIRef("DOM")}}

Phương thức Node.insertBefore()  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  , insertBefore() 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).

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 cloneNode() sẽ không được tự động đồng bộ hoá.

Nếu tài liệu ttham chiếu node là null thì 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.

Nếu đối tượng  con đã cho là một {{domxref("DocumentFragment")}} thì toàn bộ nội dung của DocumentFragment  sẽ được chuyển đến danh sách tập con của đối tượng gốc cụ thể.

Cú pháp

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

Nếu referenceNode là null thì newNode isẽ được chèn vào đuôi của danh sách các đối tượng tập con nodes .

referenceNode  không phải  là một tham số  có thể tuỳ chọn -- bạn phải đưa ra một Node hoặc  null. 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ẽ behave  differently( hành xử khác nhau) trong mỗi phiên bản công cụ tìm kiếm khác nhau.

Return value

Giá trị được trả về sẽ là một phần tử con trừ khi newNode là một {{domxref("DocumentFragment")}}, trong trường hợp {{domxref("DocumentFragment")}} rỗng được trả về.

Ví dụ

Example 1

<div id="parentElement">
   <span id="childElement">foo bar</span>
</div>

<script>
// 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 --> 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 ]
</script>

Example 2

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
// Create a new, plain <span> 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);
</script>

Không hề có phương thức  insertAfter() nào cả. Nó có thể được mô phỏng bởi phương thức  insertBefore cùng với {{domxref("Node.nextSibling")}}.

Trong ví dụ trước, sp1 đã chèn được vào sau  sp2 bằng cách dùng :

parentDiv.insertBefore(sp1, sp2.nextSibling);

Nếu sp2 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 — sp2.nextSibling trả về null, và sp1 sẽ được chèn vào cuối cùng của danh sách tập node con (ngay sau sp2).

Example 3

Chèn một phần tử vào phần tử con đứng đầu bằng cách dùng đặc tính firstChild.

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

Khi phần tử không có con cả (đối tượng con đầu tiên) thì  firstChild là null. 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.

Khả năng tương thích của công cụ tìm kiếm

{{Compat("api.Node.insertBefore")}}

Chi tiết

Specification Status Comment
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}} {{Spec2('DOM WHATWG')}} Fixes errors in the insertion algorithm
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}} {{Spec2('DOM4')}} Describes the algorithm in more detail
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}} {{Spec2('DOM3 Core')}} No notable changes
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}} {{Spec2('DOM2 Core')}} No notable changes
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}} {{Spec2('DOM1')}} Introduced

Xem thêm