Menu
3.5. āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻāĻ° āĻāĻŋāĻ¤āĻ°ā§āĻ° āĻāĻ¨ā§āĻā§āĻ¨ā§āĻ
āĻāĻāĻ¨ āĻ¤ā§ āĻāĻžāĻ˛āĻŋ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻ¤ā§āĻ°ā§ āĻāĻ°āĻ˛āĻžāĻŽāĨ¤ āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻāĻŋāĻ¤āĻ°ā§ āĻ¤ā§ āĻāĻŋāĻā§ āĻĻāĻŋāĻ¤ā§ āĻšāĻŦā§ āĻ āĻŋāĻ āĻ¨āĻž? āĻšā§āĻ¯āĻž āĻ¸ā§āĻāĻ¨ā§āĻ¯ā§ āĻāĻŽāĻ°āĻž āĻĻā§āĻāĻāĻžāĻŦā§ āĻ¸ā§āĻ āĻāĻžāĻ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋāĻ āĻļā§āĻ§ā§ āĻā§āĻā§āĻ¸āĻāĻ āĻāĻŽāĻ°āĻž āĻ¯āĻĻāĻŋ āĻāĻŽāĻžāĻĻā§āĻ° āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻāĻ° āĻāĻŋāĻ¤āĻ°ā§ āĻļā§āĻ§ā§ āĻā§āĻā§āĻ¸āĻ āĻĸā§āĻāĻžāĻ¤ā§ āĻāĻžāĻ āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻāĻ° textContent āĻ¨āĻžāĻŽā§ āĻāĻāĻāĻž āĻĒā§āĻ°āĻĒāĻžāĻ°ā§āĻāĻŋ āĻāĻā§, āĻ¯ā§āĻāĻž āĻĻāĻŋā§ā§ āĻāĻŽāĻ°āĻž āĻĒā§āĻ˛ā§āĻāĻ¨ āĻā§āĻā§āĻ¸āĻ āĻĸā§āĻāĻžāĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§ āĻāĻŽāĻžāĻĻā§āĻ° āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻāĨ¤ āĻ§āĻ°āĻŋ āĻāĻŽāĻžāĻĻā§āĻ° āĻāĻā§āĻ° āĻ¤ā§āĻ°ā§ āĻāĻ°āĻž newParagraph āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻ āĻāĻŋāĻā§ āĻā§āĻā§āĻ¸āĻ āĻĸā§āĻāĻžāĻ¤ā§ āĻāĻžāĻā§āĻāĻŋāĻnewParagraph.textContent = ‘His name is: ‘ + Safwan Alamgir + ‘!’;
āĻāĻāĻ¨ āĻāĻ textContent āĻĒā§āĻ°āĻĒāĻžāĻ°ā§āĻāĻŋ āĻĻāĻŋā§ā§ āĻāĻŽāĻ°āĻž āĻāĻžāĻāĻ˛ā§ āĻā§āĻ¨ā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻāĻ° āĻā§āĻā§āĻ¸āĻāĻ āĻĻā§āĻāĻ¤ā§ āĻĒāĻžāĻ°āĻŋāĨ¤ āĻ¯āĻĻāĻŋ āĻāĻŽāĻ°āĻž āĻāĻŦāĻžāĻ° āĻāĻŽāĻžāĻĻā§āĻ°Â newParagraph āĻāĻ° āĻāĻ¨ā§āĻā§āĻ¨ā§āĻ āĻĻā§āĻāĻ¤ā§ āĻāĻžāĻāĻ
newParagraph.textContent;
HTML āĻĸā§āĻāĻžāĻ¨ā§āĻ
āĻāĻāĻ¨ āĻāĻŽāĻ°āĻž āĻāĻā§āĻ° āĻā§āĻāĻ¨āĻŋāĻā§ āĻĒā§āĻ˛ā§āĻāĻ¨ āĻā§āĻā§āĻ¸āĻ āĻĸā§āĻāĻžāĻ¤ā§ āĻĒāĻžāĻ°āĻ˛ā§āĻ āĻāĻŽāĻ°āĻž āĻāĻžāĻāĻ˛ā§ āĻ¨āĻ¤ā§āĻ¨ āĻā§āĻ¨ā§ HTML āĻā§āĻ¯āĻžāĻ āĻĸā§āĻāĻžāĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§ āĻ¨āĻž āĻ āĻā§āĻāĻ¨āĻŋāĻ āĻĻāĻŋā§ā§āĨ¤ āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻ¸ā§āĻāĻžāĻ° āĻāĻ¨ā§āĻ¯ā§ āĻāĻ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻāĻ°āĻ āĻ¨āĻ¤ā§āĻ¨ āĻāĻ°ā§āĻāĻāĻž āĻĒā§āĻ°āĻĒāĻžāĻ°ā§āĻāĻŋ āĻāĻā§ innerHTML āĻ¨āĻžāĻŽā§āĨ¤ āĻāĻāĻ¨ āĻ¯āĻĻāĻŋ āĻāĻŽāĻ°āĻž āĻāĻŽāĻžāĻĻā§āĻ° newDiv āĻāĻ° āĻāĻŋāĻ¤āĻ°ā§ āĻĒā§āĻ°ā§ HTML āĻā§āĻ¯āĻžāĻāĻ āĻāĻ°ā§āĻāĻāĻž āĻĸā§āĻāĻžāĻ¤ā§ āĻāĻžāĻāĻnewDiv.innerHTML = ‘<p>DOM Manipulation is Fun!</p>’;
āĻāĻāĻ¨ āĻāĻāĻžāĻ¨ā§ āĻāĻ innerHTML āĻ āĻ¯ā§āĻšā§āĻ¤ā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻāĻ° āĻāĻāĻāĻž āĻĒā§āĻ°āĻĒāĻžāĻ°ā§āĻāĻŋ, āĻāĻāĻž āĻĻāĻŋā§ā§ āĻ¨āĻ°āĻŽāĻžāĻ˛āĻŋ āĻāĻŽāĻ°āĻž āĻāĻžāĻāĻ˛ā§ āĻ¯ā§āĻā§āĻ¨ā§ āĻāĻ˛āĻŋāĻŽā§āĻ¨ā§āĻ āĻāĻ° āĻāĻŋāĻ¤āĻ°ā§āĻ° HTML āĻāĻžāĻ āĻĻā§āĻāĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§āĻ
newDiv.innerHTML;
- āĻ˛āĻŋāĻ¸ā§āĻā§ āĻāĻāĻāĻŋ āĻ¨āĻ¤ā§āĻ¨ āĻāĻāĻā§āĻŽ āĻ¯ā§āĻ āĻāĻ°āĻžāĨ¤
<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>
