HTML DOM Element innerHTML প্রতিভা

বিবরণ ও ব্যবহার

innerHTML প্রতিভা সংযোজন কিংবা প্রত্যাহার তত্ত্বকে HTML সামগ্রী (অভ্যন্তরীণ HTML) প্রদান করা

অন্যান্য পরামর্শ:

innerText প্রতিভা

textContent প্রতিভা

একটি উদাহরণ

উদাহরণ 1

id="myP"-এর তত্ত্বের HTML সামগ্রী পাওয়া:

let html = document.getElementById("myP").innerHTML;

স্বয়ং প্রয়োগ করুন

উদাহরণ 2

id="demo"-এর তত্ত্বের HTML সামগ্রী পরিবর্তন করুন:

document.getElementById("demo").innerHTML = "I have changed!";

স্বয়ং প্রয়োগ করুন

উদাহরণ 3

id="myList"-এর <ul> তত্ত্বের HTML সামগ্রী পাওয়া:

let html = document.getElementById("myList").innerHTML;

স্বয়ং প্রয়োগ করুন

উদাহরণ 4

id="demo"-এর <p> তত্ত্বের HTML সামগ্রী মুছে দিন:

element.innerHTML = "";

স্বয়ং প্রয়োগ করুন

উদাহরণ 5

দুই তত্ত্বের HTML সামগ্রী পরিবর্তন করুন:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

স্বয়ং প্রয়োগ করুন

উদাহরণ 6

重复元素的 HTML 内容：

element.innerHTML += element.innerHTML;

স্বয়ং প্রয়োগ করুন

উদাহরণ 7

লিঙ্কের HTML কনটেন্ট এবং URL-কে পরিবর্তন করুন:

element.innerHTML = "W3School";
element.href = "";

স্বয়ং প্রয়োগ করুন

সিন্তাক্স

innerHTML প্রতিমান ফিরিয়ে দেয়:

element.innerHTML

innerHTML প্রতিমান সংযোজন:

element.innerHTML = text

প্রতিমান

মূল্য বর্ণনা
স্ট্রিং HTML কনটেন্ট

ফলাফল

ধরন বর্ণনা
স্ট্রিং ইলেমেন্টের HTML কনটেন্ট

innerHTML, innerText এবং textContent-এর মধ্যে পার্থক্য

innerText এক্সিটি ফলাফল হল:

শুধুমাত্র ইলেমেন্ট এবং সমস্ত উপইলেমেন্টগুলোর টেক্সট কনটেন্ট ফিরিয়ে দেয়, CSS লুকানো টেক্সট, স্পেসিং এবং ট্যাগগুলো নেই, যদিও <script> এবং <style> ইলেমেন্টগুলো ছাড়া。

innerHTML এক্সিটি ফলাফল হল:

ইলেমেন্টের টেক্সট কনটেন্ট, সমস্ত ক্ষতিগ্রস্ত টেক্সট এবং অভ্যন্তরীণ HTML ট্যাগগুলো সহ。

textContent এক্সিটি ফলাফল হল:

ইলেমেন্ট এবং সমস্ত উপইলেমেন্টগুলোর টেক্সট কনটেন্ট, শুধুমাত্র ক্ষতিগ্রস্ত টেক্সট এবং CSS লুকানো টেক্সট সহ, কিন্তু ট্যাগগুলো নেই。

HTML উদাহরণ

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

JavaScript ইনস্ট্যান্স

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

স্বয়ং প্রয়োগ করুন

উপরোক্ত উদাহরণে:

innerText এক্সিটি ফলাফল হল:

এই ইলেমেন্টটি অতিরিক্ত স্পেসিং আছে এবং একটি স্প্যান ইলেমেন্ট ধারণ করে。

innerHTML এক্সিটি ফলাফল হল:

   এই ইলেমেন্টটি অতিরিক্ত স্পেসিং আছে এবং <span>একটি স্প্যান ইলেমেন্ট</span> ধারণ করে。

textContent এক্সিটি ফলাফল হল:

   এই ইলেমেন্টটি অতিরিক্ত স্পেসিং আছে এবং একটি <span>স্প্যান ইলেমেন্ট</span> ধারণ করে。

ব্রাউজার সমর্থন

সমস্ত ব্রাউজারগুলো সমর্থন করে element.innerHTML：

চ্রোম আইই এজ ফায়ারফক্স স্যাফারি ওপেরা
চ্রোম আইই এজ ফায়ারফক্স স্যাফারি ওপেরা
সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন