insertAdjacentHTML মেথড

insertAdjacentHTML মেথডটি পৃষ্ঠার যেকোনো জায়গায় একটি HTML কোড স্ট্রিং ইনসার্ট করতে দেয়। কোডটি রেফারেন্স এলিমেন্টের সাপেক্ষে ইনসার্ট করা হয়। রেফারেন্স এলিমেন্টের আগে ইনসার্ট করা যেতে পারে (ইনসারশন পদ্ধতি 'beforeBegin'), এর পরে (ইনসারশন পদ্ধতি 'afterEnd'), এবং এছাড়াও রেফারেন্স এলিমেন্টের শুরুতে (ইনসারশন পদ্ধতি 'afterBegin') বা শেষে (ইনসারশন পদ্ধতি 'beforeEnd') ইনসার্ট করা যেতে পারে।

সিনট্যাক্স

রেফারেন্স এলিমেন্ট.insertAdjacentHTML(ইনসারশন পদ্ধতি, ইনসার্ট করার কোড);

উদাহরণ . beforeBegin পদ্ধতি

ধরুন রেফারেন্স এলিমেন্টটি হল #target এলিমেন্ট। এর আগে একটি নতুন প্যারাগ্রাফ ইনসার্ট করা যাক:

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

কোড এক্সিকিউট করার ফলাফল:

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

উদাহরণ . afterEnd পদ্ধতি

এখন রেফারেন্স এলিমেন্টের পরে একটি নতুন প্যারাগ্রাফ ইনসার্ট করা যাক:

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

কোড এক্সিকিউট করার ফলাফল:

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

উদাহরণ . afterBegin পদ্ধতি

রেফারেন্স এলিমেন্টের শুরুতে একটি নতুন প্যারাগ্রাফ ইনসার্ট করা যাক:

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

কোড এক্সিকিউট করার ফলাফল:

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

উদাহরণ . beforeEnd পদ্ধতি

রেফারেন্স এলিমেন্টের শেষে একটি নতুন প্যারাগ্রাফ ইনসার্ট করা যাক:

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

কোড এক্সিকিউট করার ফলাফল:

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

আরও দেখুন

insertAdjacentText মেথড,
যেটি নির্দিষ্ট স্থানে টেক্সট ইনসার্ট করে
insertAdjacentElement মেথড,
যেটি নির্দিষ্ট স্থানে একটি এলিমেন্ট ইনসার্ট করে
prepend মেথড,
যেটি এলিমেন্টগুলো শুরুতে ইনসার্ট করে
append মেথড,
যেটি এলিমেন্টগুলো শেষে ইনসার্ট করে
appendChild মেথড,
যেটি প্যারেন্টের শেষে এলিমেন্টগুলো ইনসার্ট করে
insertBefore মেথড,
যেটি একটি এলিমেন্টের আগে এলিমেন্টগুলো ইনসার্ট করে