Re: [dom] Proposal to improve the DOM creation api (#150)

It seems that the discussion around E4H and template strings is more complicated than I would like this proposal to address. In the end, both template strings and E4H rely on the already existent DOM apis of `appendChild` or `innerHTML` to work with the DOM and don't introduce any new ones. https://lists.w3.org/Archives/Public/www-dom/2011OctDec/thread.html#msg20 eventually wound up going towards template strings, but it looked like they were proposing a new browser implemented function called `html` that would convert a string using the HTML parser (which reverts back to the E4H and template string debate). 

With that in mind, I would like to propose adding new DOM apis that make these use cases much cleaner and easier to carry out:

1. creating a single node with attributes
  * if this could also handle the use case of creating a single node and it's children in a single step, that'd be great
1. creating a series of sibling nodes to be appended to a parent

These apis could then be used by either E4H or template strings, which ever one wins out in the end. If this new api is the `html` function, it shouldn't go through the HTML parser if it'll have problems such as https://lists.w3.org/Archives/Public/www-dom/2011OctDec/0170.html was describing. Instead, it should just accept the string it's given and create a `tr` with it's children, regardless if the node doesn't have context.

(a very simple approach that mimics the behavior would be)

```js
function html(str) {
  var match = str.match(/<([^>]*)>/);
  var rootStr = match[1].trim().split(/\s/);
  var tagName = rootStr[0];
  var root = document.createElement(tagName);
  
  // attributes
  for (var i = 1; i < rootStr.length; i++) {
    var attr = rootStr[i];
    var name = attr.substring(0, attr.indexOf('='));
    var value = attr.match(/=['"]?([^'"]*)/)[1];
    
    root.setAttribute(name, value);
  }
  
  // children
  root.innerHTML = str.replace(match[0], '');  // kinda hakcy as it will ignore the orphaned closing tag

  return root;
}

console.log(html(`<tr class="foo" data-config=bar>
  <td class="hello">
    <span class="foo">bar</span>
  </td>
</tr>`));
console.log(html(`<tr>`));
```

---
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/150#issuecomment-172969246