Metoden insertAdjacentText

Metoden insertAdjacentText låter dig infoga en sträng var som helst på sidan. Strängen infogas i förhållande till ett referenselement. Du kan infoga före referenselementet (infogningssätt 'beforeBegin'), efter det (infogningssätt 'afterEnd'), eller i början (infogningssätt 'afterBegin') eller i slutet (infogningssätt 'beforeEnd') av referenselementet.

Syntax

javascriptreferenselement.insertAdjacentText(infogningssätt, text att infoga);

Exempel . Sätt beforeBegin

Låt referenselementet vara elementet #target. Låt oss infoga lite text före det:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');

Resultat av exekvering av koden:

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

Exempel . Sätt afterEnd

Låt oss nu infoga en ny textsträng efter referenselementet:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');

Resultat av exekvering av koden:

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

Exempel . afterBegin

Låt oss infoga en ny textsträng i början av referenselementet:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');

Resultat av exekvering av koden:

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

Exempel . Sätt beforeEnd

Låt oss infoga en ny textsträng i slutet av referenselementet:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');

Resultat av exekvering av koden:

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

Se även