From 74eed9ebea09883b6d625576e82d2c04bfb236b0 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Fri, 16 Oct 2020 02:06:08 +0530
Subject: [PATCH] create-modify-element - Add appendChild section

---
 docs/create-modify-element.mdx | 40 +++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/docs/create-modify-element.mdx b/docs/create-modify-element.mdx
index 8ccb1ed..92ad48e 100644
--- a/docs/create-modify-element.mdx
+++ b/docs/create-modify-element.mdx
@@ -106,4 +106,42 @@ ele.setAttribute("type", "text")
 // <input type="text"/>
 ```
 
-[Read on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
\ No newline at end of file
+[Read on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
+
+### 3. `appendChild()`
+
+The `.appendChild()` method inserts a new element as the last child of the current element.
+
+`ele1.appendChild(ele2)`
+
+```js
+var eleDiv = document.createElement("div")
+var eleH1 = document.createElement("h1")
+
+eleDiv.appendChild(eleH1)
+// <div><h1></h1></div>
+```
+
+<Accordion title="Related">
+  <Admonition type="note" title="If it already has a parent">
+  If `ele2` is already a child of another element, 
+  then it is first removed from its current parent and then added within the new parent `ele1`.
+  </Admonition>
+
+  <Admonition type="note" title="If it is DocumentFragment">
+  If `ele2` is a DocumentFragment, then the entire contents of the DocumentFragment is appended 
+  to the child list of `ele1`.
+  </Admonition>
+
+  <Admonition type="note" title="`.append()`">
+  There is a newer api called `.append()`, which is similar.
+
+  ⭐️ `.append()` allows multiple child elements or string as argument. It creates Text node automatically if the input is a string.  
+
+  ```js
+  ele1.append(ele2, ele3, 'hello world')
+  ```
+
+  💔 `.appendChild()` only allows a single element as input.
+  </Admonition>
+</Accordion>
\ No newline at end of file