Node.insertBefore()

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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 . 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 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);
  • insertedNode đối tượng node đã bị chèn vào bởi newNode
  • parentNode đối tượng phần tử gốc mới được chèn node vào.
  • newNode đối tượng node bị chèn
  • referenceNode đối tượng node lúc trước mà newNode  bị chèn vào.

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 DocumentFragment, trong trường hợp 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 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
insertBeforeChrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support 1Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Chi tiết

Specification Status Comment
DOM
The definition of 'Node.insertBefore' in that specification.
Living Standard Fixes errors in the insertion algorithm
DOM4
The definition of 'Node.insertBefore' in that specification.
Obsolete Describes the algorithm in more detail
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Node.insertBefore' in that specification.
Obsolete No notable changes
Document Object Model (DOM) Level 2 Core Specification
The definition of 'Node.insertBefore' in that specification.
Obsolete No notable changes
Document Object Model (DOM) Level 1 Specification
The definition of 'Node.insertBefore' in that specification.
Obsolete Introduced

Xem thêm