document.querySelector method to select an element by its CSS selector. Once we’ve selected the element, we can modify its CSS properties using the
const element = document.querySelector('#myElement'); element.style.color = 'red';
const element = document.querySelector('#myElement'); element.classList.add('active'); element.classList.remove('inactive');
This code adds the ‘active’ class and removes the ‘inactive’ class from the element with the ID ‘myElement’.
- Changing the content of an HTML element
- Changing the style (CSS) of an HTML element
- Adding or removing HTML attributes of an HTML element
- Creating new HTML elements and adding them to the page
Let’s say you have a website with a button that, when clicked, changes the color of the page background:
style of the
body element when the button is clicked.
Another example is creating a new paragraph element and adding it to the page:
This is an existing paragraph.
p element, add text to it, and then add it to the
div element with the ID of
Getting Started with HTML and CSS Manipulation
HTML is the foundation of web development. It is used to create the basic structure of a web page by defining the content and layout of the page. HTML tags are used to define headings, paragraphs, lists, links, images, and other elements that make up the web page. HTML is a markup language that is used to structure content and is not a programming language, so it cannot be used to add interactivity to a website.
CSS is used to style the HTML elements and give them a visually appealing look. It is used to define the colors, fonts, layouts, and other visual aspects of a web page. CSS is a styling language that works in conjunction with HTML and can be used to create responsive designs that adjust to different screen sizes. CSS is also not a programming language and cannot be used to add interactivity to a website.