> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/dom/create-insert-delete-nodes.md).

# 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 ⟩ 
      * [.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 ⟩ 
      * [.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 ⟩ 
    * [.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()](/web/browser/dom/type/element/+ext/elem.wrappedwith.md)
  {% 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="/files/RsW98xUV8DU7Fe1WtajZ" 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 %}