Updating UI with JavaScript

ပထမဆုံးအနေနှင့် Code Editor ကိုဖွင့်ရမယ်။ နောက် index.html ဖိုင်တစ်ခုတည်ဆောပ်မယ်။

index.html

<html>
  <body>
    <div></div>
  </body>
</html>

နောက်တော့ div ထဲမှာ id တစ်ခုပေးပါ။ id သည် Web Page တစ်ခုလုံးမှာ တစ်ခုပဲ့ရှိရမှာပါ။ တူလို့မရပါဘူး။

index.html

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

ဆက်ပြီး HTML ဖိုင်အထဲမှာပဲ့ Script tag တစ်ခုရေးပေးရမယ်။

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

ဆိုတော့ HTML ထဲမှာ DOM Method ကိုသုံးလို့ရပြီ။ နောက် document ထဲမှာရှိတဲ့ id ကိုရယူချင်တာကြောင့် getElementById ကိုအသုံးပြုပါ့မယ်။ သတိထားပါ ကျွန်တော်တို့သည် document တစ်ခုလုံးမှာရှိတဲ့ id ကိုရယူမှာကြောင့် document ကို getElementById ရဲ့ ရှေ့ကနေ ပေးရတာပါ။

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
        const app = document.getElementById('app')
    </script>
  </body>
</html>

ဆက်လက်ပြီး DOM ကိုအသုံးပြုကာ h1 Element ကို Create လုပ်ပါမယ်။

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // Select the div element with 'app' id
      const app = document.getElementById('app');
 
      // Create a new H1 element
      const header = document.createElement('h1');
 
      // Create a new text node for the H1 element
      const text = 'Never Give up!';
      const headerContent = document.createTextNode(text);
 
      // Append the text to the H1 element
      header.appendChild(headerContent);
 
      // Place the H1 element inside the div
      app.appendChild(header);
    </script>
  </body>
</html>

အပေါ်မှာပြထားတဲ့ code တွေကိုသေချာ Copy ကူးပြီး Code Editor ထဲသို့ထည့်ပါ။ ထို့နောက် မိမိကြိုက်မှစ်သက်ရာ Browser ကိုအသုံးပြုပြီး File ကို Run ကြည့်ပါ။ ထိုအခါ h1 ဆိုတဲ့ Element နှင့်အတူ 'Never Give up!' ဆိုတဲ့ Text ကိုမြင်တွေ့ရမှာဖြစ်ပါတယ်။

History React Getting Started