insertBefore մեթոդը

insertBefore մեթոդը թույլ է տալիս տեղադրել էլեմենտ մեկ այլ էլեմենտից առաջ: Ամենից հաճախ օգտագործվում է createElement-ի միջոցով էլեմենտի ստեղծումից հետո: Մեթոդը կիրառվում է այն էլեմենտի ծնողի նկատմամբ, որից առաջ պետք է տեղադրումը կատարվի:

Շարահյուսություն

javascriptծնող.insertBefore(էլեմենտ, ումից առաջ տեղադրել);

Օրինակ

Ստեղծենք պարբերություն և տեղադրենք այն երկրորդ պարբերությունից առաջ:

html<div id="parent">
  <p>էլեմենտ 1</p>
  <p id="before">էլեմենտ 2</p>
  <p>էլեմենտ 3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

Կոդի կատարման արդյունքը:

html<div id="parent">
  <p>էլեմենտ 1</p>
  <p>!</p>
  <p>էլեմենտ 2</p>
  <p>էլեմենտ 3</p>
</div>

Օրինակ

Ավելացնենք պարբերություն #parent էլեմենտի սկզբում: Դրա համար կտեղադրենք մեր պարբերությունը #parent-ի առաջին ժառանգից առաջ: Այս ժառանգին կարելի է գտնել firstElementChild-ի օգնությամբ:

html<div id="parent">
  <p>էլեմենտ 1</p>
  <p>էլեմենտ 2</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

Կոդի կատարման արդյունքը:

html<div id="parent">
  <p>!</p>
  <p>էլեմենտ 1</p>
  <p>էլեմենտ 2</p>
</div>

Օրինակ

Երկրորդ պարամետրին null փոխանցելիս insertBefore մեթոդը աշխատում է ինչպես appendChild: Միաժամանակ, եթե էլեմենտում չկան երեխա էլեմենտներ, firstElementChild-ը վերադարձնում է null: Հետևաբար, էլեմենտի սկիզբ ավելացնել հնարավոր է նաև այն ժամանակ, երբ դրանում չկան երեխա էլեմենտներ:

html<div id="parent"></div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

Կոդի կատարման արդյունքը:

html<div id="parent">
  <p>!</p>
</div>

Տես նաև