# create/insert/delete nodes

{% tabs %}
{% tab title="📘 手冊" %}
* create：
  * Document ⟩ [.createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
* insert：
  * new children：
    * Element ⟩&#x20;
      * [.insertAdjacentHTML()](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) -  👉 🗺️ 圖解 ⭐️
      * [.append()](https://developer.mozilla.org/en-US/docs/Web/API/Element/append) - append a set of [`Node`](https://developer.mozilla.org/en-US/docs/Web/API/Node) objects or string ([`Text`](https://developer.mozilla.org/en-US/docs/Web/API/Text)) objects.
      * [.prepend()](https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend) - insert before the first child.
    * Node ⟩ [.appendChild()](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)
  * new siblings：
    * Element ⟩&#x20;
      * [.before()](https://developer.mozilla.org/en-US/docs/Web/API/Element/before)
      * [.after()](https://developer.mozilla.org/en-US/docs/Web/API/Element/after)
* remove/replace：
  * Element ⟩&#x20;
    * [.remove()](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove)
    * [.replaceWith()](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith)
  * Node ⟩ [.removeChild()](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild)
{% endtab %}

{% tab title="⬇️ 應用" %}
* [elem.wrappedwith](type/element/+ext/elem.wrappedwith "mention")
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
If an element is <mark style="color:yellow;">**already in the document**</mark> and you <mark style="color:yellow;">**insert it somewhere else**</mark>, it will be <mark style="color:orange;">**moved**</mark> to the new location, <mark style="color:red;">**not copied**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🗺️ 圖解" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FIBz6ylh3fkhSLglCRi4s%2Ffile.drawing.svg?alt=media&#x26;token=737e8999-c7cc-4643-bdcd-43e8224d66a7" alt="insertion positions for elem.insertAdjacentHTML()" class="gitbook-drawing">
{% endtab %}

{% tab title="💈範例" %}
* replit: [table of contents](https://replit.com/@pegasusroe/table-of-contents#script.js)
{% endtab %}
{% endtabs %}
