3.5. āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻ­āĻŋāϤāϰ⧇āϰ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āϟ

āĻāĻ–āύ āϤ⧋ āĻ–āĻžāϞāĻŋ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āϤ⧈āϰ⧀ āĻ•āϰāϞāĻžāĻŽāĨ¤ āĻ•āĻŋāĻ¨ā§āϤ⧁ āĻ­āĻŋāϤāϰ⧇ āϤ⧋ āĻ•āĻŋāϛ⧁ āĻĻāĻŋāϤ⧇ āĻšāĻŦ⧇ āĻ āĻŋāĻ• āύāĻž? āĻšā§āϝāĻž āϏ⧇āϜāĻ¨ā§āϝ⧇ āφāĻŽāϰāĻž āĻĻ⧁āχāĻ­āĻžāĻŦ⧇ āϏ⧇āχ āĻ•āĻžāϜ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋāσ āĻļ⧁āϧ⧁ āĻŸā§‡āĻ•ā§āϏāϟāσ āφāĻŽāϰāĻž āϝāĻĻāĻŋ āφāĻŽāĻžāĻĻ⧇āϰ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻ­āĻŋāϤāϰ⧇ āĻļ⧁āϧ⧁ āĻŸā§‡āĻ•ā§āϏāϟ āĻĸ⧁āĻ•āĻžāϤ⧇ āϚāĻžāχ āϤāĻžāĻšāϞ⧇ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ textContent āύāĻžāĻŽā§‡ āĻāĻ•āϟāĻž āĻĒā§āϰāĻĒāĻžāĻ°ā§āϟāĻŋ āφāϛ⧇, āϝ⧇āϟāĻž āĻĻāĻŋā§Ÿā§‡ āφāĻŽāϰāĻž āĻĒā§āϞ⧇āχāύ āĻŸā§‡āĻ•ā§āϏāϟ āĻĸ⧁āĻ•āĻžāϤ⧇ āĻĒāĻžāϰāĻŦā§‹ āφāĻŽāĻžāĻĻ⧇āϰ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāĨ¤ āϧāϰāĻŋ āφāĻŽāĻžāĻĻ⧇āϰ āφāϗ⧇āϰ āϤ⧈āϰ⧀ āĻ•āϰāĻž newParagraph āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻ āĻ•āĻŋāϛ⧁ āĻŸā§‡āĻ•ā§āϏāϟ āĻĸ⧁āĻ•āĻžāϤ⧇ āϚāĻžāĻšā§āĻ›āĻŋāσ
newParagraph.textContent = ‘His name is: ‘ + Safwan Alamgir + ‘!’;
āφāĻĒāύāĻŋ āĻāĻ­āĻžāĻŦ⧇ āϚāĻžāχāϞ⧇āĻ“ āφāĻĒāύāĻžāϰ āύāĻŋāĻœā§‡āϰ āĻĄāĻžāϟāĻž āĻĸ⧁āĻ•āĻžāϤ⧇ āĻĒāĻžāϰāĻŦ⧇āύ, āϏāĻŦ āϧāϰāύ⧇āϰ āĻĢā§āϞ⧇āĻ•ā§āϏāĻŋāĻŦāĻŋāϞāĻŋāϟāĻŋ āφāϛ⧇ āĻāĻ–āĻžāύ⧇āĨ¤ āĻāĻ–āύ āϝāĻĻāĻŋ āφāĻŽāϰāĻž āφāĻŽāĻžāĻĻ⧇āĻ°Â newParagraph āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āϟāĻž āĻĻ⧇āĻ–āĻŋāσ newParagraph; āφāĻŽāĻžāĻĻ⧇āϰ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻ āĻŸā§‡āĻ•ā§āϏāϟ āĻĸ⧁āϕ⧇ āϗ⧇āϛ⧇āσ insert content 3.5. āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻ­āĻŋāϤāϰ⧇āϰ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āϟ āĻāĻ–āύ āĻāĻ‡Â textContent āĻĒā§āϰāĻĒāĻžāĻ°ā§āϟāĻŋ āĻĻāĻŋā§Ÿā§‡ āφāĻŽāϰāĻž āϚāĻžāχāϞ⧇ āϕ⧋āύ⧋ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻŸā§‡āĻ•ā§āϏāϟāĻ“ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāϰāĻŋāĨ¤ āϝāĻĻāĻŋ āφāĻŽāϰāĻž āφāĻŦāĻžāϰ āφāĻŽāĻžāĻĻ⧇āĻ°Â newParagraph āĻāϰ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āϟ āĻĻ⧇āĻ–āϤ⧇ āϚāĻžāχāσ newParagraph.textContent; new insert content 3.5. āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻ­āĻŋāϤāϰ⧇āϰ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āϟ

HTML āĻĸ⧁āĻ•āĻžāύ⧋āσ

āĻāĻ–āύ āφāĻŽāϰāĻž āφāϗ⧇āϰ āĻŸā§‡āĻ•āύāĻŋāϕ⧇ āĻĒā§āϞ⧇āχāύ āĻŸā§‡āĻ•ā§āϏāϟ āĻĸ⧁āĻ•āĻžāϤ⧇ āĻĒāĻžāϰāϞ⧇āĻ“ āφāĻŽāϰāĻž āϚāĻžāχāϞ⧇ āύāϤ⧁āύ āϕ⧋āύ⧋ HTML āĻŸā§āϝāĻžāĻ— āĻĸ⧁āĻ•āĻžāϤ⧇ āĻĒāĻžāϰāĻŦā§‹ āύāĻž āϐ āĻŸā§‡āĻ•āύāĻŋāĻ• āĻĻāĻŋā§Ÿā§‡āĨ¤ āĻ•āĻŋāĻ¨ā§āϤ⧁ āϏ⧇āϟāĻžāϰ āϜāĻ¨ā§āϝ⧇ āĻāχ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϰāχ āύāϤ⧁āύ āφāϰ⧇āĻ•āϟāĻž āĻĒā§āϰāĻĒāĻžāĻ°ā§āϟāĻŋ āφāϛ⧇ innerHTML āύāĻžāĻŽā§‡āĨ¤ āĻāĻ–āύ āϝāĻĻāĻŋ āφāĻŽāϰāĻž āφāĻŽāĻžāĻĻ⧇āϰ newDiv āĻāϰ āĻ­āĻŋāϤāϰ⧇ āĻĒ⧁āϰ⧋ HTML āĻŸā§āϝāĻžāĻ—āχ āφāϰ⧇āĻ•āϟāĻž āĻĸ⧁āĻ•āĻžāϤ⧇ āϚāĻžāχāσ
newDiv.innerHTML = ‘<p>DOM Manipulation is Fun!</p>’;
āĻ…āĻŦāĻļā§āϝāχ āĻ–ā§‡ā§ŸāĻžāϞ āϰāĻžāĻ–āĻŦ⧇āύ āφāĻĒāύāĻžāϰ HTML āϝāĻžāϤ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āφāĻ•āĻžāϰ⧇ āĻĨāĻžāϕ⧇āĨ¤ āĻāĻŦāĻžāϰ āϝāĻĻāĻŋ āφāĻŽāϰāĻž āφāĻŽāĻžāĻĻ⧇āϰ newDiv āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϟāĻž āĻĻ⧇āĻ–āĻŋāσ newDiv; āĻĒāĻžāĻļ⧇āϰ āĻ¤ā§āϰāĻŋāĻ­āĻžāϜāĻŋāĻ•ā§ƒāϤāĻŋāϰ āĻŦāĻžāϟāύ⧇ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰāϞ⧇ āĻĒ⧁āϰ⧋ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āϟāĻž āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāϰāĻŦ⧇āύāσ new div 1 3.5. āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻ­āĻŋāϤāϰ⧇āϰ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āϟ āĻāĻ–āύ āĻāĻ–āĻžāύ⧇ āĻāχ innerHTML āĻ“ āϝ⧇āĻšā§‡āϤ⧁ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻāĻ•āϟāĻž āĻĒā§āϰāĻĒāĻžāĻ°ā§āϟāĻŋ, āĻāϟāĻž āĻĻāĻŋā§Ÿā§‡ āύāϰāĻŽāĻžāϞāĻŋ āφāĻŽāϰāĻž āϚāĻžāχāϞ⧇ āϝ⧇āϕ⧋āύ⧋ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻ­āĻŋāϤāϰ⧇āϰ HTML āϟāĻžāĻ“ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāϰāĻŦā§‹āσ newDiv.innerHTML; Dom Manipulation 3.5. āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻ­āĻŋāϤāϰ⧇āϰ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āϟ
  • āϞāĻŋāĻ¸ā§āĻŸā§‡ āĻāĻ•āϟāĻŋ āύāϤ⧁āύ āφāχāĻŸā§‡āĻŽ āϝ⧋āĻ— āĻ•āϰāĻžāĨ¤
<ul id=“myList”>
<li>Javascript</li>
<li>React.JS</li>
</ul>
<script>
const node = document.createElement(“li”);
const textnode = document.createTextNode(“Next.Js”);
node.appendChild(textnode);
document.getElementById(“myList”).appendChild(node);
</script>
  • āĻāĻ•āϟāĻŋ āφāχāĻŸā§‡āĻŽ āϕ⧇ āĻāĻ• āϞāĻŋāĻ¸ā§āϟ āĻĨ⧇āϕ⧇ āĻ…āĻ¨ā§āϝ āϞāĻŋāĻ¸ā§āĻŸā§‡ āĻŽā§āĻ­ āĻ•āϰāĻž āĨ¤
<ul id=“myList1”>
<li>Javascript</li>
<li>React.JS</li>
</ul>
<ul id=“myList2”>
<li>Next.JS</li>
<li>Node.JS</li>
</ul>
<script>
const node = document.getElementById(“myList2”).lastElementChild;
document.getElementById(“myList1”).appendChild(node);
</script>
  • āϞāĻŋāĻ¸ā§āĻŸā§‡āϰ āĻĒā§āϰāĻĨāĻŽā§‡ āĻāĻ•āϟāĻŋ āφāχāĻŸā§‡āĻŽ āϝ⧋āĻ— āĻ•āϰāĻž āĨ¤
<ul id=“myList”>
<li>Javascript</li>
<li>React.JS</li>
</ul>
<script>
const newNode = document.createElement(“li”);
const textNode = document.createTextNode(“Node.JS”);
newNode.appendChild(textNode);
const list = document.getElementById(“myList”);
list.insertBefore(newNode, list.children[0]);
</script>
  • āϞāĻŋāĻ¸ā§āϟ āĻĨ⧇āϕ⧇ āĻĒā§āϰāĻĨāĻŽ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āĻŸā§‡āϰ āĻāχāϚāϟāĻŋāĻāĻŽāĻāϞ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āϟ āĻŦ⧇āϰ āĻ•āϰāĻž āĨ¤
<ul id=“myList”>
<li>Javascript</li>
<li>Next.JS</li>
</ul>
<script>
let text = document.getElementById(“myList”).firstElementChild.innerHTML;
</script>
  • āϞāĻŋāĻ¸ā§āϟ āĻĨ⧇āϕ⧇ āĻĒā§āϰāĻĨāĻŽ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻĄāĻŋāϞāĻŋāϟ āĻ•āϰāĻž āĨ¤
<ul id=“myList”>
<li>Javascript</li>
<li>React.JS</li>
<li>Next.JS</li>
</ul>
<script>
const list = document.getElementById(“myList”);
list.removeChild(list.firstElementChild);
</script>
  • āύāĻŋāĻšā§‡ āĻĻā§‡ā§ŸāĻž HTML āϗ⧁āϞāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ Exercise āϗ⧁āϞāĻž āĻ•āϰ⧁āύāĨ¤

    • āϞāĻŋāĻ¸ā§āĻŸā§‡āϰ Javascript āϞ⧇āĻ–āĻžāϟāĻŋ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ āĻ•āϰ⧇ Typescript āϞāĻŋāϖ⧁āύ āĨ¤
    • āϞāĻŋāĻ¸ā§āĻŸā§‡āϰ āĻļ⧇āώ⧇ Python āϝ⧋āĻ— āĻ•āϰ⧁āύ
    • āĻĒā§āϰāĻĨāĻŽ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻ•āĻžāϞāĻžāϰ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ āĻ•āϰ⧇ Green āĻ•āĻžāϞāĻžāϰ āĻāĻŦāĻ‚ āĻĢāĻ¨ā§āϟ āϏāĻžāχāϜ 20 pixel āĻ•āϰ⧁āύāĨ¤
    • āϞāĻŋāĻ¸ā§āĻŸā§‡āϰ āĻļ⧇āώ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āϟāĻž āĻĄāĻŋāϞāĻŋāϟ āĻ•āϰ⧁āύāĨ¤
    • āϞāĻŋāĻ¸ā§āĻŸā§‡āϰ āĻļ⧇āώ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻāχāϚāϟāĻŋāĻāĻŽāĻāϞ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āϟ āĻŦ⧇āϰ āĻ•āϰ⧁āύāĨ¤
     
     
     
    <ul id=“myList”>
    <li>Javascript</li>
    <li>React.JS</li>
    <li>Next.JS</li>
    <li>Node.JS</li>
    </ul>