diff --git a/docs/create-modify-element.mdx b/docs/create-modify-element.mdx
index 9b6aafa..3902e07 100644
--- a/docs/create-modify-element.mdx
+++ b/docs/create-modify-element.mdx
@@ -9,6 +9,12 @@ import Admonition from "../components/Admonition"
import Accordion from "../components/Accordion"
import MDN from "../components/MDNBadge"
+:::note DOM interfaces
+Every kind of **DOM** node is represented by an interface based on **Node** interface.
+**Element, Document and DocumentFragment** interfaces inherit from Node.
+More about DOM interfaces [here](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
+:::
+
## Finding elements
### 1. querySelector()
@@ -36,7 +42,7 @@ document.querySelector(".not-found"); // null
-
+
### 2. querySelectorAll()
@@ -60,17 +66,19 @@ for (let p of paras) {
}
```
-
+
## Create / insert element
### 3. createElement()
-It creates a new HTML element, taking the tag name (`"div"`) as argument.
+`document.createElement(tagName) : Element`
+
+This method creates a new HTML element, taking the specified HTML tag name as argument.
```js
document.createElement("div")
-// creates
+// creates a element
```
@@ -94,7 +102,7 @@ document.createElement("div")
`Element.setAttribute(name, value)`
-It sets a attribute on the current element.
+This method sets an attribute on the current element.
`name` - name of the attribute to add. Ex- "type".
`value` - value of the attribute. Ex- "text".
@@ -110,9 +118,9 @@ ele.setAttribute("type", "text")
### 5. appendChild()
-`Element.appendChild(newElement)`
+`Node.appendChild(newNode)`
-It inserts a new element as the last child of the parent element.
+This method inserts a new node as the last child of the parent node.
```js
let eleDiv = document.createElement("div")
@@ -150,11 +158,11 @@ eleDiv.appendChild(eleH1)
### 6. removeChild()
-`Element.removeChild(childElement)`
+`Node.removeChild(childNode)`
-This method tries to remove a child element from the parent and returns the removed node.
+This method tries to remove a child node from the parent and returns the removed node.
-If the element to be removed is not a child of the parent element, it throws a `NotFoundError` DOMException.
+If the node to be removed is not a child of the parent node, it throws a `NotFoundError` DOMException.
```js
//
@@ -168,13 +176,13 @@ parentEle.removeChild(childEle)
### 7. insertBefore()
-`Element.insertBefore(newEle, refEle)`
+`Node.insertBefore(newEle, refEle)`
-This method inserts a new child element before another child within a parent.
+This method inserts a new child node before another node within a parent.
`newEle` - The node to be inserted.
-`refEle` - The reference element before which newEle should be inserted. If refEle is `null`, then newEle is added as the last child.
+`refEle` - The reference node before which newEle should be inserted. If refEle is `null`, then newEle is added as the last child.
```js
//
@@ -204,19 +212,15 @@ parent.insertBefore(newEle, ref.nextSibling)
### 8. Document Fragment
+`document.createDocumentFragment() : DocumentFragment`
+
+This method is used to create a new empty document fragment.
+
DocumentFragment can be considered to be a off-screen lightweight `document` object.
It is generally used for batching multiple operations - by doing them in the fragment over time and then rendering the whole content to the visible DOM in one shot .
Because fragment is not rendered, making changes to it doesn't cause any performance impact (no reflow).
-**Methods** -
-
-`document.createDocumentFragment()` - creates a new empty fragment.
-
-`.appendChild()` / `.insertBefore()` - can be used to move the whole content of the fragment to the actual DOM.
-
-**Example** -
-
```js
let fragment = document.createDocumentFragment()
@@ -229,6 +233,8 @@ outerEle.appendChild(fragment)
// This will remove all content from fragment and
// insert them within outerEle.
+// .appendChild()/.insertBefore() - can be used to move the whole content of the fragment to the actual DOM.
+
```