Menu
3.5. āĻāϞāĻŋāĻŽā§āύā§āĻ āĻāϰ āĻāĻŋāϤāϰā§āϰ āĻāύā§āĻā§āύā§āĻ
āĻāĻāύ āϤ⧠āĻāĻžāϞāĻŋ āĻāϞāĻŋāĻŽā§āύā§āĻ āϤā§āϰ⧠āĻāϰāϞāĻžāĻŽāĨ¤ āĻāĻŋāύā§āϤ⧠āĻāĻŋāϤāϰ⧠āϤ⧠āĻāĻŋāĻā§ āĻĻāĻŋāϤ⧠āĻšāĻŦā§ āĻ āĻŋāĻ āύāĻž? āĻšā§āϝāĻž āϏā§āĻāύā§āϝ⧠āĻāĻŽāϰāĻž āĻĻā§āĻāĻāĻžāĻŦā§ āϏā§āĻ āĻāĻžāĻ āĻāϰāϤ⧠āĻĒāĻžāϰāĻŋāĻ āĻļā§āϧ⧠āĻā§āĻā§āϏāĻāĻ āĻāĻŽāϰāĻž āϝāĻĻāĻŋ āĻāĻŽāĻžāĻĻā§āϰ āĻāϞāĻŋāĻŽā§āύā§āĻ āĻāϰ āĻāĻŋāϤāϰ⧠āĻļā§āϧ⧠āĻā§āĻā§āϏāĻ āĻĸā§āĻāĻžāϤ⧠āĻāĻžāĻ āϤāĻžāĻšāϞ⧠āĻāϞāĻŋāĻŽā§āύā§āĻ āĻāϰ textContent āύāĻžāĻŽā§ āĻāĻāĻāĻž āĻĒā§āϰāĻĒāĻžāϰā§āĻāĻŋ āĻāĻā§, āϝā§āĻāĻž āĻĻāĻŋā§ā§ āĻāĻŽāϰāĻž āĻĒā§āϞā§āĻāύ āĻā§āĻā§āϏāĻ āĻĸā§āĻāĻžāϤ⧠āĻĒāĻžāϰāĻŦā§ āĻāĻŽāĻžāĻĻā§āϰ āĻāϞāĻŋāĻŽā§āύā§āĻ āĻāĨ¤ āϧāϰāĻŋ āĻāĻŽāĻžāĻĻā§āϰ āĻāĻā§āϰ āϤā§āϰ⧠āĻāϰāĻž newParagraph āĻāϞāĻŋāĻŽā§āύā§āĻ āĻ āĻāĻŋāĻā§ āĻā§āĻā§āϏāĻ āĻĸā§āĻāĻžāϤ⧠āĻāĻžāĻā§āĻāĻŋāĻnewParagraph.textContent = ‘His name is: ‘ + Safwan Alamgir + ‘!’;


HTML āĻĸā§āĻāĻžāύā§āĻ
āĻāĻāύ āĻāĻŽāϰāĻž āĻāĻā§āϰ āĻā§āĻāύāĻŋāĻā§ āĻĒā§āϞā§āĻāύ āĻā§āĻā§āϏāĻ āĻĸā§āĻāĻžāϤ⧠āĻĒāĻžāϰāϞā§āĻ āĻāĻŽāϰāĻž āĻāĻžāĻāϞ⧠āύāϤā§āύ āĻā§āύ⧠HTML āĻā§āϝāĻžāĻ āĻĸā§āĻāĻžāϤ⧠āĻĒāĻžāϰāĻŦā§ āύāĻž āĻ āĻā§āĻāύāĻŋāĻ āĻĻāĻŋā§ā§āĨ¤ āĻāĻŋāύā§āϤ⧠āϏā§āĻāĻžāϰ āĻāύā§āϝ⧠āĻāĻ āĻāϞāĻŋāĻŽā§āύā§āĻāϰāĻ āύāϤā§āύ āĻāϰā§āĻāĻāĻž āĻĒā§āϰāĻĒāĻžāϰā§āĻāĻŋ āĻāĻā§ innerHTML āύāĻžāĻŽā§āĨ¤ āĻāĻāύ āϝāĻĻāĻŋ āĻāĻŽāϰāĻž āĻāĻŽāĻžāĻĻā§āϰ newDiv āĻāϰ āĻāĻŋāϤāϰ⧠āĻĒā§āϰ⧠HTML āĻā§āϝāĻžāĻāĻ āĻāϰā§āĻāĻāĻž āĻĸā§āĻāĻžāϤ⧠āĻāĻžāĻāĻnewDiv.innerHTML = ‘<p>DOM Manipulation is Fun!</p>’;


- āϞāĻŋāϏā§āĻā§ āĻāĻāĻāĻŋ āύāϤā§āύ āĻāĻāĻā§āĻŽ āϝā§āĻ āĻāϰāĻžāĨ¤
<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>