bendtherules/UiQuestions
1
0
Fork 0
mirror of https://github.com/bendtherules/UiQuestions.git synced 2026-08-18 13:52:50 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

create-modify-element - From fragment, link back to appendChild note

Browse Source 
To describe how it can be actually rendered to DOM
This commit is contained in:
bendtherules
2020-10-23 19:06:18 +05:30
parent 43995cccf9
commit 8217dc3f04
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/create-modify-element.mdx
+5 -5
View File
@@ -137,7 +137,7 @@ eleDiv.appendChild(eleH1)
then it is removed from its existing parent and then added to the new parent. then it is removed from its existing parent and then added to the new parent.
</Admonition> </Admonition>
<Admonition type="note" title="If it is DocumentFragment"> <Admonition type="note" title="If it is DocumentFragment" id="appendChild-documentFragment">
If newNode is a DocumentFragment, then - instead of adding the fragment itself as a child, 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. the entire content of the fragment is added as children of the parent node.
</Admonition> </Admonition>
@@ -179,7 +179,9 @@ parentEle.removeChild(childEle)
`Node.insertBefore(newEle, refEle)` `Node.insertBefore(newEle, refEle)`
This method inserts a new child node before another node within a parent. This method inserts a new child node before another node within a parent.
It also works with **DocumentFragment**, by inserting all of its content in that position.
`newEle` - The node to be inserted. `newEle` - The node to be inserted.
@@ -220,7 +222,7 @@ This method is used to create a new empty document fragment.
DocumentFragment can be considered to be a off-screen lightweight `document` object. 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 . 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). Because fragment is not rendered, making changes to it doesn't cause any performance impact (no reflow). To **actually "render" the fragment** in the visible document, [use appendChild](#appendChild-documentFragment) or `insertBefore`.
```js ```js
let fragment = document.createDocumentFragment() let fragment = document.createDocumentFragment()
@@ -234,8 +236,6 @@ outerEle.appendChild(fragment)
// This will remove all content from fragment and // This will remove all content from fragment and
// insert them within outerEle. // insert them within outerEle.
// .appendChild()/.insertBefore() - can be used to move the whole content of the fragment to the actual DOM.
``` ```
<MDN title="Document Fragment" url="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment" /> <MDN title="Document Fragment" url="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment" />