Download presentation
Presentation is loading. Please wait.
Published byJena Mullens Modified over 9 years ago
2
getElementById() document.getElementById(“idName").innerHTML = “Any valid content"; getElementById is a method innerHTML is a property.
3
getElementsByClassName() var elements= document.getElementsByClassName(“className"); for(var i=0;i<elements.length;i++) { elements[i].innerHTML="test"; }
4
getElementsByTagName var z=document.getElementsByTagName("div"); for(var i=0;i<z.length;i++) { z[i].innerHTML=“Updated content“; }
5
How to change Style element.style.property=
6
How to change Style var z=document.getElementsByTagName("div"); for(var i=0;i<z.length;i++) { z[i].style.backgroundColor="red"; z[i].style.borderRadius="10px"; }
7
Change the attribute of an HTML element element.attribute= element.setAttribute(attribute,value)
8
Image src Attribute Change function changeI() { var x=document.getElementById("img1"); x.src=“src2"; }
9
DOM Nodes
10
Creating New HTML Elements This is a paragraph. This is another paragraph. var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para);
11
Creating new HTML Elements - insertBefore() This is a paragraph. This is another paragraph. var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var element = document.getElementById("div1"); var child = document.getElementById("p1"); element.insertBefore(para,child);
12
Removing Existing HTML Elements This is a paragraph. This is another paragraph. var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child);
13
Replacing HTML Elements This is a paragraph. This is another paragraph. var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para,child);
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.