# DocumentFragment

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
serves as a <mark style="color:yellow;">**temporary parent**</mark> when you want to manipulate **a group of sibling nodes** as a **single unit**.
{% endhint %}

{% hint style="warning" %}
* [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) <mark style="color:red;">**does not**</mark> have a <mark style="color:yellow;">**parent**</mark>.&#x20;
* When inserting a [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) node into the document, the [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) <mark style="color:orange;">**itself**</mark> is <mark style="color:red;">**not inserted**</mark>. Instead, <mark style="color:yellow;">**all of its children**</mark> are inserted.
{% endhint %}
{% endtab %}

{% tab title="📘 手冊" %}
* [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment)
* [document](document "mention") ⟩ [.createDocumentFragment()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment)
{% endtab %}

{% tab title="👥 相關" %}
* [content](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content) of [template](../../../component/template "mention") is a [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment).
{% endtab %}
{% endtabs %}
