> 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/js/val/prim/str/method/str.htmltoelement.md).

# str.htmlToElement()

{% tabs %}
{% tab title="💾 程式" %}

* replit: [toc](https://replit.com/@pegasusroe/toc#script.js)

```javascript
/**
 * convert HTML into Element
 * 
 * @example
 *
 *   let div = `<div id="toc"></div>`.htmlToElement()
 *
 */
String.prototype.htmlToElement = function () {
    const template = document.createElement('template');
    template.innerHTML = this.trim();            // remove text node of whitespace
    return template.content.firstElementChild;   // return Element (no Text nodes)
};
```

{% endtab %}

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

* [Element](/web/browser/dom/type/element.md) ⟩ [.insertAdjacentHTML()](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)
  {% endtab %}

{% tab title="⬇️ 應用" %}

* [table of contents](/web/browser/dom/create-insert-delete-nodes/table-of-contents.md) of a HTML page.
* [elem.wrappedWithHTML()](/web/browser/dom/type/element/+ext/elem.wrappedwithhtml.md)
  {% endtab %}

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

* [Creating a new DOM element from an HTML string using built-in DOM methods or Prototype](https://stackoverflow.com/a/35385518/5409815) ⭐️
  {% endtab %}

{% tab title="👥 相關" %}

* DOM ⟩ [Element](/web/browser/dom/type/element.md)
* [HTML](/web/html.md) ⟩ [element](/web/html/element.md)
* [SVGElement()](/web/browser/svg/svgelement.md) - create/configure SVG element.
  {% endtab %}
  {% endtabs %}