How to add a new element

There are two ways to make a new element in the DOM

Element.appendchild () Adds a new child node to the element as the last child node.

Node.appendchild (new Node object)
1. Create a new element createelement
2. Create a new text createTextNode
3. Combine new elements and new text to create a new label
4. Add the last child node to the node
Element.insertbefore () Inserts a new node before the specified existing child node.

Node.insertbefore (newnode new Node object, Existingnode)
A existingnode that represents the child node of the new node before it is inserted. If not specified, the InsertBefore method inserts newnode at the end.
1. Create a new element createelement
2. Create a new text createTextNode
3. Combine new elements and new text to create a new label
4. Get parent Node
5. Gets the node that will be added before.
6. Add a new node before the node
The difference between element.appendchild () and Element.insertbefore ():
The former is to add the last child node to the specified node, which is a parent-child relationship with the specified node, and the latter is a sibling to the pointing node before the node is specified.

How to add a new element