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>

আরও দেখুন