Changing Content

မိမိ လိုချင်တဲ့ Element တစ်ခုကို ဖမ်းလို့ ရပြီဆိုရင် အဲ့ဒီ Element ထဲက စာသားတွေ (Content) ကို စိတ်ကြိုက် ပြင်ဆင်လို့ ရပါပြီ။

၁။ innerText

Element ထဲမှာ ရှိနေတဲ့ စာသား (Text) သီးသန့်ကိုပဲ ဆွဲယူတာ၊ ပြင်ဆင်တာတွေ လုပ်ပေးပါတယ်။ သူက HTML Tag တွေကို နားမလည်ပါဘူး။ လူမျက်စိနဲ့ တကယ် မြင်ရတဲ့ (ဖတ်လို့ရတဲ့) စာသားကိုပဲ ဦးစားပေးပါတယ်။

let title = document.querySelector("h1");
title.innerText = "New Title"; // h1 ထဲက စာသား အသစ်ပြောင်းသွားပါမယ်

၂။ textContent (အသုံးအများဆုံး)

innerText နဲ့ အလုပ်လုပ်ပုံ ဆင်တူပေမယ့်၊ သူက CSS နဲ့ ဖျောက်ထားတဲ့ (display: none) စာသားတွေကိုပါ အကုန်ဆွဲယူပေးနိုင်ပါတယ်။ နောက်ပြီး စက်အတွက် အလုပ်လုပ်ရတာ နည်းနည်း ပိုမြန်ပါတယ်။

title.textContent = "Another Title";

၃။ innerHTML (စွမ်းဆောင်ရည်မြင့်သော်လည်း အန္တရာယ်ရှိသည် ⚠️)

စာသား သက်သက်သာမကဘဲ HTML Tag တွေကိုပါ အထဲမှာ ရောနှော ထည့်သွင်း ရေးသားလို့ ရပါတယ်။

let container = document.querySelector("div");
container.innerHTML = "<h1>This is bold!</h1>"; // <h1> Tag ပါ အလုပ်လုပ်သွားပြီး စာလုံးကြီး ဖြစ်သွားပါမယ်

အထူး သတိထားရန် (Security Risk): ပြင်ပ (User ဆီက ရလာတဲ့) Data တွေကို innerHTML သုံးပြီး တိုက်ရိုက် မထည့်သင့်ပါဘူး။ Hacker တွေက အဲ့ဒီကနေတဆင့် အန္တရာယ်ရှိတဲ့ Script တွေ ထည့်သွင်းပြီး တိုက်ခိုက် (XSS Attack) လုပ်သွားနိုင်လို့ပါ။

💡 ဘယ်ဟာကို ရွေးချယ် အသုံးပြုမလဲ?

• စာသား သက်သက် (Plain Text) ကိုပဲ ပြင်ချင်တယ်ဆိုရင် -> textContent ကို အသုံးပြုပါ။
• HTML Tag တွေပါ အလုပ်လုပ်စေချင်တဲ့ အခါမျိုးမှသာ -> innerHTML ကို သတိထား အသုံးပြုပါ။