1 Matching Annotations
  1. Jun 2023
  2. stackoverflow.com stackoverflow.com
    Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
    1
    1. kael 03 Jun 2023
      HTML 5 introduced the <template> element which can be used for this purpose (as now described in the WhatWG spec and MDN docs). A <template> element is used to declare fragments of HTML that can be utilized in scripts. The element is represented in the DOM as a HTMLTemplateElement which has a .content property of DocumentFragment type, to provide access to the template's contents. This means that you can convert an HTML string to DOM elements by setting the innerHTML of a <template> element, then reaching into the template's .content property.

      ```js /* * @param {String} HTML representing a single element * @return {Element} / function htmlToElement(html) { var template = document.createElement('template'); html = html.trim(); // Never return a text node of whitespace as the result template.innerHTML = html; return template.content.firstChild; }

      var td = htmlToElement('<td>foo</td>'), div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

      /* * @param {String} HTML representing any number of sibling elements * @return {NodeList} / function htmlToElements(html) { var template = document.createElement('template'); template.innerHTML = html; return template.content.childNodes; }

      var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>'); ```

      js dom html <template/> dom:documentFragment dom:innerHTML
    Visit annotations in context

    Tags

    Annotators

    URL

    stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro