var $ = document.querySelectorAll.bind(document);

​

var divs = $('#container div');

​

divs.textContent = 'Hello World';

​

divs.addEventListener('click', ({target}) => {

  target.textContent = 'CLICKED';

  target.style.color = target.style.background = '';

});

​

divs.style.forEach(s => s.color = 'red');

​

for(var style of divs.style) style.background = 'black';

​

$('body').appendChild(document.createElement('button'));

​

$('body button').textContent = 'Back To Hello World';

​

$('body button').addEventListener('click', () => {

  for(var div of divs) {

    div.textContent = 'Hello World';

    div.style.color = 'red';

    div.style.background = 'black';

  }

});

​

var addBtn = document.createElement('button'), removeBtn = document.createElement('button');

​

addBtn.textContent = 'add';

removeBtn.textContent = 'remove';

​

addBtn.addEventListener('click', () => {

  for(var i = 0; i < 10; i++) {

    var btn = document.createElement('button');

    btn.textContent = i;

    document.body.appendChild(btn);

  }

  // soon you'll be able to do (also working on that):

  /*

    var btn = document.create('button', {

      textContent: i

    });

  */

});

​

removeBtn.addEventListener('click', () => {

  var btns = $('button').slice(3); // all buttons besides first 3

  btns.remove(); // remove all of them

});

​

$('body').appendChild(addBtn);

$('body').appendChild(removeBtn);

​