HTML DOM api standards proposal - examples of how the native HTML DOM api is cumbersome to use and how different libraries handle it

nativeDomAPI.js

/**
 * Create element with attributes
 *
 *  <input type="number" min="0" max="99" name="number" id="number" class="number-input" disabled/>
 */

// native 
var input = document.createElement('input');
input.type = "number";
input.min = 0;
input.max = 99;
input.name = 'number';
input.id = 'number';
input.classList.add('number-input');
input.disabled = true;
document.body.appendChild(input);
// or the hacky way - create a throwaway parent node just to use innerHTML
var div = document.createElement('div');
div.innerHTML = '<input type="number" min="0" max="99" name="number" id="number" class="number-input" disabled/>';
document.body.appendChild(div.firstChild);

// jQuery
$('<input type="number" min="0" max="99" name="number" id="number" class="number-input" disabled/>').appendTo('body');

// mooTools
document.body.appendChild(new Element('input', {type: 'number', min: 0, max: 99, name: 'number', id: 'number', class: 'number-input', disabled: true}));
// or
$$('body').appendHTML('<input type="number" min="0" max="99" name="number" id="number" class="number-input" disabled/>');

// blissful
$.create('input', {type: 'number', min: 0, max: 99, name: 'number', id: 'number', className: 'number-input', disabled: true, inside: $('body')});





/**
 * Create element with child elements
 *
 *  <div class="container">
 *    <div class="row">
 *      <div class="col">
 *        <div>Hello</div>
 *      </div>
 *    </div>
 *  </div>
 */

// native
var div = document.createElement('div');
div.classList.add('container');
div.innerHTML = '<div class="row"><div class="col"><div>Hello</div></div></div>';
document.body.appendChild(div);

// jQuery
$('<div class="container"><div class="row"><div class="col"><div>Hello</div></div></div>').appendTo('body');

// mooTools
document.body.appendChild(new Element('div', {class: 'contianer', html: '<div class="row"><div class="col"><div>Hello</div></div></div>'}));
// or
$$('body').appendHTML('<div class="container"><div class="row"><div class="col"><div>Hello</div></div></div>');

// blissful
$.create('div', {className: 'container', inside: $('body'), contents: [
  {tag: 'div', className: 'row', contents: [
    {tag: 'div', className: 'col', contents: [
      {tag: 'div', contents: ['Hello']}
    ]}
  ]}
]});





/**
 * Wrap an element in the DOM with a new element
 *
 *  <!-- before -->
 *  <div>
 *    <span id="el">My Element</span>
 *  </div>
 *
 *  <!-- after -->
 *  <div>
 *    <a href="url">
 *      <span id="el">My ELement</span>
 *    </a>
 *  </div>
 */

// native
var el = document.querySelector('#el');
// save off the parent node because using appendChild will remove the element from it's parent and
// add it to the new element as a child (making the new element it's parent)
var parent = el.parentNode;
var anchor = document.createElement('a');
anchor.href = 'url';
anchor.appendChild(el);
parent.appendChild(anchor);

// jQuery
$('#el').wrap('<a href="url">');

// mooTools
new Element('a', {href: 'url'}).wraps('el');

//blissful
$.create('a', {href:'url', around: $('.container')});





/**
 * Create sibling elements to be added to a parent element
 *
 *  <!-- before -->
 *  <ul id="list">
 *    <li>Car</li>
 *  </ul>
 *
 *  <!-- after -->
 *  <ul id="list">
 *    <li>Car</li>
 *    <li>Plane</li>
 *    <li>Boat</li>
 *    <li>Bike</li>
 *  </ul>
 */

// native
// use document fragment to batch appendChild calls for good performance
var frag = document.createDocumentFragment();
var li = document.createElement('li');
li.textContent = 'Plane';
frag.appendChild(li);
li = document.createElement('li');
li.textContent = 'Boat';
frag.appendChild(li);
li = document.createElement('li');
li.textContent = 'Bike';
frag.appendChild(li);
document.querySelector('#list').appendChild(frag);
// or, if you have the ability to create it through a loop
var frag = document.createDocumentFragment();
['Plane', 'Boat', 'Bike'].forEach(function(item) {
  var li = document.createElement('li');
  li.textContent = item;
  frag.appendChild(li);
});
document.querySelector('#list').appendChild(frag);

// jQuery
$('<li>Plane</li><li>Boat></li><li>Bike</li>').appendTo('#list');

// mooTools
$('list').appendHTML('<li>Plane</li><li>Boat></li><li>Bike</li>');

// blissful
$.create('li', {contents: ['Plane'], inside: $('#list')});
$.create('li', {contents: ['Boat'], inside: $('#list')});
$.create('li', {contents: ['Bike'], inside: $('#list')});

👍

I don't really like any of them much. So given the options I would rather, until we can come up with something else, just use raw JS.