HTML বিষয়বস্তু পরিবর্তন করা হচ্ছে
HTML DOM জাভাস্ক্রিপ্টকে HTML উপাদানের পাঠ্য এবং বিষয়বস্তু রূপান্তর করতে দেয়।
বিষয়বস্তু পরিবর্তন করার সবচেয়ে সহজ উপায় হল innerHTML অ্যাট্রিবিউট ব্যবহার করা:
document.getElementById(id).innerHTML = new HTMLinnerHTML অ্যাট্রিবিউট
একটি উপাদানের বিষয়বস্তু পাওয়ার সবচেয়ে সহজ উপায় হল innerHTML অ্যাট্রিবিউট ব্যবহার করা।
innerHTML বৈশিষ্ট্য HTML উপাদানের বিষয়বস্তু পেতে বা পরিবর্তন করার জন্য দরকারী।
দ্রষ্টব্য:
innerHTML অ্যাট্রিবিউটটি <html> এবং <body> সহ যেকোনো HTML উপাদান পেতে বা প্রতিস্থাপন করতে ব্যবহার করা যেতে পারে।
সাধারণ ভুল
দ্রষ্টব্য:
- একটি DOM উপাদান উপস্থিত হওয়ার আগে অ্যাক্সেস করার চেষ্টা করা হচ্ছে৷
- "ডেমো" এর মতো একটি আইডিতে উদ্ধৃতি ভুলে যাওয়া।
উদাহরণ
একটি <p> উপাদানের বিষয়বস্তু পরিবর্তন করুন:
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>উদাহরণ বর্ণনা:
- উপরের HTML নথিতে id="p1" সহ একটি <p> উপাদান রয়েছে।
- আমরা id="p1" এর সাথে উপাদান পেতে HTML DOM ব্যবহার করি।
- একটি জাভাস্ক্রিপ্ট সেই উপাদানটির (innerHTML) বিষয়বস্তুকে "নতুন পাঠ্য!" এ পরিবর্তন করতে পারে। পরিবর্তন করে
উদাহরণ
একটি <h1> উপাদানের বিষয়বস্তু পরিবর্তন করুন:
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>উদাহরণ বর্ণনা:
- উপরের HTML নথিতে id="id01" সহ একটি <h1> উপাদান রয়েছে।
- আমরা id="id01" এর সাথে উপাদান পেতে HTML DOM ব্যবহার করি।
- একটি জাভাস্ক্রিপ্ট উপাদানের বিষয়বস্তু (innerHTML) "নতুন শিরোনাম" এ পরিবর্তন করে।
বৈশিষ্ট্য পরিবর্তন
একটি HTML অ্যাট্রিবিউটের মান পরিবর্তন করতে, এই সিনট্যাক্স ব্যবহার করুন:
document.getElementById(id).attribute = new valueউদাহরণ
একটি <img> উপাদানের src বৈশিষ্ট্যের মান পরিবর্তন করে:
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>উদাহরণ বর্ণনা:
- উপরের HTML নথিতে id="myImage" সহ একটি <img> উপাদান রয়েছে।
- id="myImage" সহ উপাদান পেতে আমরা HTML DOM ব্যবহার করি।
- একটি জাভাস্ক্রিপ্ট উপাদানটির src বৈশিষ্ট্যকে "smiley.gif" থেকে "landscape.jpg" এ পরিবর্তন করে।
ডায়নামিক HTML কন্টেন্ট
জাভাস্ক্রিপ্ট গতিশীল এইচটিএমএল সামগ্রী তৈরি করতে পারে:
বর্তমান তারিখ:
Date : Mon Jan 26 2026 16:27:44 GMT+0530 (India Standard Time)
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>document.write()
জাভাস্ক্রিপ্টে, document.write() সরাসরি HTML আউটপুট স্ট্রীমে লিখতে ব্যবহার করা যেতে পারে:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>সতর্কতা !
ডকুমেন্ট লোড হওয়ার পর document.write() ব্যবহার করবেন না। এটি নথিটি ওভাররাইট করবে।