diff --git a/docs/create-modify-element.mdx b/docs/create-modify-element.mdx
index 3902e07..ed6b5cf 100644
--- a/docs/create-modify-element.mdx
+++ b/docs/create-modify-element.mdx
@@ -11,8 +11,7 @@ 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)
+**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
@@ -31,13 +30,13 @@ document.querySelector(".not-found"); // null
- This method is also available on all DOM nodes. If you want to look within a specific element, just use `ele.querySelector()` on the parent element.
+ Besides Document, this method is also available on Element and DocumentFragment.
+ If you want to look within a specific element, just use ele.querySelector() on the parent element.
+ If you want to look within a specific fragment, just use df.querySelector() on the parent fragment.
```js
- // Example - .outer > .inner
- outerEle.addEventListener((ev) => {
- let innerEle = ev.target.querySelector(".inner");
- });
+ // Example - outer is a parent element/fragment.
+ let innerEle = outer.querySelector(".inner");
```
@@ -66,6 +65,19 @@ for (let p of paras) {
}
```
+
+
+ Besides Document, this method is also available on Element and DocumentFragment.
+ If you want to look for list of elements within specific element, just use ele.querySelectorAll() on the parent element.
+ If you want to look for list of elements within specific fragment, just use df.querySelectorAll() on the parent fragment.
+
+ ```js
+ // Example - outer is a parent element/fragment.
+ let innerEles = outer.querySelectorAll(".inner");
+ ```
+
+
+
## Create / insert element
@@ -132,13 +144,13 @@ eleDiv.appendChild(eleH1)
- If newElement is already a child of another element,
+ If newNode is already a child of another node,
then it is removed from its existing parent and then added to the new parent.
- If newElement is a DocumentFragment, then - instead of adding the fragment itself as a child,
- the entire content of the fragment is added as children of the parent element.
+ If newNode is a DocumentFragment, then - instead of adding the fragment itself as a child,
+ the entire content of the fragment is added as children of the parent node.