What is Document Object Model (DOM)??

An API for (HTML,SVG) that offers a web page as a tree of objects.

With the DOM, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Web browsers use Dom specifications to determine how to display web pages.

Dom is language agnostic, we can use other programing languages to interact with it as well not just Javascript. What we end up seeing in the browser is based on the Dom, not just the original HTML source code.

Dom stands for Document Object Model

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them you can change the document’s structure, style, or content.

3 steps how to create new elements with DOM

1. Create a new element by using Document.createElement() and give it some text content.
2. Manipulate the element (add styles, classes, ids, text etc.)
3. Place the element into the DOM by Append Elements

The ParentNode.append() method inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.

Differences from Node.appendChild():

• ParentNode.append() allows you to also append DOMString objects, whereas Node.appendChild() only accepts Node objects.
• ParentNode.append() has no return value, whereas Node.appendChild() returns the appended Node object.
• ParentNode.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.

3 step how to create new elements with DOM