First a quick introduction:
This is possible through DOM manipulation.
The Document Object Model (DOM) is created when the page loads from the HTML that the web server provides the browser.
We normally interact with it through the document object. Because it is the “source of truth” for what browsers display, changes to the DOM create changes in the browser screen. It is helpful to think of the DOM as a tree, in order to better understand how to find or select HTML elements and their children in the rendered page.
When creating the HTML for a page including class or id attributes for a node (HTML element) will make it and its children (branches) easier to find (as well as provide useful information about that node).
For single elements:
▹Will find an HTML element with a particular id
▹ If the element is found, the method will return the element as an object otherwise it will return null
▹More open-ended! Will find the first HTML element that matches a tag or a specified CSS selector (id, class names, types, attributes, etc.)
For multiple elements:
▹Will return all the elements with the same tag name
▹Will return all the elements with the same class name
▹Will find all HTML elements that match a specified CSS selector (id, class names, types, attributes, etc.)
Adjusting the property of a selected node:
If we assign an element to a variable:
We can then change the attributes of that element:
Adding and Removing HTML:
▹ After which we can use the example above to adjust its properties or
▹ use .innerHTML to specify the HTML content of an element or
▹ use innerText to edit the text within the opening and closing tags
Following creating the element we can append the changes to a parent node, passing in the argument of the new child element:
As for removing Nodes:
▹ node.removeChild(childNode) will remove a particular child
▹ node.remove() will remove the node on which it was called