# element content

[browser](https://lochiwei.gitbook.io/web/browser) ⟩ [DOM](https://lochiwei.gitbook.io/web/browser/dom) ⟩ [type](https://lochiwei.gitbook.io/web/browser/dom/type) ⟩ [Element](https://lochiwei.gitbook.io/web/browser/dom/type/element) ⟩ content

{% hint style="success" %}

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
When [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue) is defined to be <mark style="color:orange;">**`null`**</mark>, setting it <mark style="color:red;">**has no effect**</mark>.
{% endhint %}
{% endtab %}

{% tab title="📘 手冊" %}

* Node ⟩
  * [.textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) - text content of the <mark style="color:yellow;">**node**</mark> and its <mark style="color:orange;">**descendants**</mark>.
  * [.nodeValue](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue) - returns/sets the <mark style="color:yellow;">**value**</mark> of the node.
* Element ⟩&#x20;
  * [.innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) - replace the <mark style="color:yellow;">**content**</mark> of the element.
  * [.outerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML) - replace the element <mark style="color:red;">**itself**</mark>.
  * [.insertAdjacentHTML()](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) -  👉 🗺️ 圖解
    {% endtab %}

{% tab title="🗣 討論" %}

* [nodeValue vs innerHTML and textContent. How to choose?](https://stackoverflow.com/questions/21311299/nodevalue-vs-innerhtml-and-textcontent-how-to-choose)
  {% endtab %}
  {% endtabs %}