insertAdjacentHTML մեթոդ

insertAdjacentHTML մեթոդը թույլ է տալիս տեղադրել HTML կոդի տող էջի ցանկացած տեղում: Կոդը տեղադրվում է հղումային տարրի նկատմամբ: Կարելի է տեղադրել հղումային տարրից առաջ (տեղադրման եղանակ 'beforeBegin'), դրանից հետո (տեղադրման եղանակ 'afterEnd'), ինչպես նաև հղումային տարրի սկզբում (տեղադրման եղանակ 'afterBegin') կամ վերջում (տեղադրման եղանակ 'beforeEnd'):

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

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

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

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

html<div id="target">
  <p>տարր</p>
</div>
javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

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

html<p>!</p>
<div id="target">
  <p>տարր</p>
</div>

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

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

html<div id="target">
  <p>տարր</p>
</div>
javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

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

html<div id="target">
  <p>տարր</p>
</div>
<p>!</p>

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

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

html<div id="target">
  <p>տարր</p>
</div>
javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

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

html<div id="target">
  <p>!</p>
  <p>տարր</p>
</div>

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

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

html<div id="target">
  <p>տարր</p>
</div>
javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

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

html<div id="target">
  <p>տարր</p>
  <p>!</p>
</div>

Տես նաև

  • insertAdjacentText մեթոդը,
    որը տեղադրում է տեքստ նշված տեղում
  • insertAdjacentElement մեթոդը,
    որը տեղադրում է տարր նշված տեղում
  • prepend մեթոդը,
    որը տեղադրում է տարրեր սկզբում
  • append մեթոդը,
    որը տեղադրում է տարրեր վերջում
  • appendChild մեթոդը,
    որը տեղադրում է տարրեր ծնողի վերջում
  • insertBefore մեթոդը,
    որը տեղադրում է տարրեր տարրից առաջ