The main object is the Document Object , which in turn contains several other child objects. Each and every single element in the document will have a corresponding presence in the DOM tree . The document object is a built-in object that has many properties and methods that we can use to access and modify websites.
Create a DOM element
In order to create new elements in the DOM, it provides a generic method createElement() , that takes as an argument an HTML tag name, and returns a plain DOM node of the specified type.
The Node.insertBefore() method inserts a node before the reference node as a child of a specified parent node. If the given child is a reference to an existing node in the document, insertBefore() moves it from its current position to the new position.
The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position.
You can modify existing elements in the DOM by changing their properties, content, style or even moving them completely from one place in the DOM to another.
The Element property innerHTML is used to get or set a string representing serialized HTML describing the element's descendants. It does not return any HTML markup . When set the content with this method, it will erases all content within the node and inserts the supplied text.
The HTMLElement.style property is used to get as well as set the inline style of an element. While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.
Similar to modifying DOM , it also allows us to delete the target nodes. The removeChild() method delete the targetnode from the parent node.