Today #day41 of #100daysofcode, I have completed 7.47 and 7.48 lessons and code practice problems in JS course. @Sololearn
changing elements
Changing Attributes
- After you've decided which element(s) to work with, you can change their attributes.
- we can change the text content of an element using the innerHTML property.
- Practically all attributes of an element can be changed using JavaScript.
Code: click
Changing Style
- The style of HTML elements can also be changed using JavaScript.
- All style attributes can be accessed using the style object of the element.
- All CSS properties can be set and modified using JavaScript. Just remember, that you cannot use dashes (-) in the property names: these are replaced with camelCase versions, where the compound words begin with a capital letter. For example: the background-color property should be referred to as backgroundColor.
Code: click
Adding and removing elements
Creating Elements
- element.cloneNode() clones an element and returns the resulting node.
- document.createElement(element) creates a new element node.
- document.createTextNode(text) creates a new text node.
Example: var node = document.createTextNode("Some new text");
- This will create a new text node, but it will not appear in the document until you append it to an existing element with one of the following methods:
- element.appendChild(newNode) adds a new child node to an element as the last child node.
- element.insertBefore(node1, node2) inserts node1 as a child before node2.
code: click
Removing Elements
- To remove an HTML element, you must select the parent of the element and use the removeChild(node) method.
code: click
- the parentNode property to get the parent of the element we want to remove:
var child = document.getElementById("p1"); child.parentNode.removeChild(child);
Replacing Elements
- To replace an HTML element, the element.replaceChild(newNode, oldNode) method is used.
code: click
Images
- 7.47 & 7.48 completed
Conclusion
- changing elements
- Changing Attributes
- Changing Style
- Creating Elements
- Removing Elements
- Replacing Elements
- quiz
- code
My Code:
- code
