insertBefore մեթոդը

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

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

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

Օրինակ

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

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

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

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

parent.insertBefore(p, before);

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

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

Օրինակ

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

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

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

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

parent.insertBefore(p, parent.firstElementChild);

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

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

Օրինակ

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

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

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

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

parent.insertBefore(p, parent.firstChild);

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

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

Տես նաև

prepend մեթոդը,
որը տեղադրում է էլեմենտներ ծնողի սկզբում
appendChild մեթոդը,
որը տեղադրում է էլեմենտներ ծնողի վերջում
insertAdjacentElement մեթոդը,
որը տեղադրում է էլեմենտ նշված տեղում
insertAdjacentHTML մեթոդը,
որը տեղադրում է թեգեր նշված տեղում