insertAdjacentElement մեթոդը

insertAdjacentElement մեթոդը թույլ է տալիս ներդնել տարր էջի ցանկացած տեղում: Ամենից հաճախ օգտագործվում է տարր ստեղծելուց հետո createElement-ի օգնությամբ: Կոդը ներդրվում է հղումային տարրի նկատմամբ: Կարելի է ներդնել հղումային տարրից առաջ (ներդրման եղանակը beforeBegin), նրանից հետո (ներդրման եղանակը afterEnd), ինչպես նաև հղումային տարրի սկզբում (ներդրման եղանակը afterBegin) կամ վերջում (ներդրման եղանակը beforeEnd):

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

javascriptհղումային տարր.insertAdjacentElement(ներդրման եղանակ, ներդրման կոդ);

Օրինակ . beforeBegin եղանակը

Ենթադրենք հղումային տարրը #target տարրն է: Ներդնենք նոր պարբերություն դրանից առաջ.

html<div id="target">
  <p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

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

html<p>!</p>
<div id="target">
  <p>elem</p>
</div>

Օրինակ . afterEnd եղանակը

Այժմ ներդնենք նոր պարբերություն հղումային տարրից հետո.

html<div id="target">
  <p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

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

html<div id="target">
  <p>elem</p>
</div>
<p>!</p>

Օրինակ . afterBegin եղանակը

Ներդնենք նոր պարբերություն հղումային տարրի սկզբում.

html<div id="target">
  <p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

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

html<div id="target">
  <p>!</p>
  <p>elem</p>
</div>

Օրինակ . beforeEnd եղանակը

Ներդնենք նոր պարբերություն հղումային տարրի վերջում.

html<div id="target">
  <p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

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

html<div id="target">
  <p>elem</p>
  <p>!</p>
</div>

Տես նաև