JS Basics: One-way data binding

var title = document.createElement('h1');
title.textContent = 'Click and edit me!';

var hero = document.createElement('div');
hero.style.backgroundColor = 'green';
hero.style.padding = '1em'
hero.style.minWidth = '1em';
hero.style.minHeight = '1em';
hero.textContent = title.textContent;

var lblInput = document.createElement('h4');
lblInput.textContent = 'Source data';

var lblOutput = document.createElement('h4');
lblOutput.textContent = 'Output';

title.setAttribute('contenteditable', true); 

title.addEventListener('input', () => {
     hero.textContent = title.textContent;
});
document.body.appendChild(lblInput);
document.body.appendChild(title);
document.body.appendChild(lblOutput);
document.body.appendChild(hero);

JS Basics: How to render fast 10k elements

var totalElements = 10000;
var getUpdatedProducts = () => {
     var products = [];
     for (var i=0; i < totalElements; i ++ ) {
         products.push({id: i, name: `Product ${i}`, price: Math.floor(Math.random() * 10)+1, description:`Lorem ipsum dolor sit amet ${i}${i}${i}`})
     }
     return products;
 }
var buildElement = () => {
     var elContainer = document.createElement('div');
     var elTitle = document.createElement('strong');
     var elPrice = document.createElement('span');
     var elDescription = document.createElement('div');
     elDescription.className = 'desc';
     elContainer.appendChild(elTitle);
     elContainer.appendChild(elPrice);
     elContainer.appendChild(elDescription);
     return elContainer;
 }
var elTemplate = buildElement();
var render = items => {
     var documentFragment = document.createDocumentFragment();
     var el, name, price, desc;
items.forEach( i => {     el = elTemplate.cloneNode(true);     name = el.querySelector('strong');     name.textContent = i.name;     price = el.querySelector('span');     price.textContent = ` £${i.price}`;     desc = el.querySelector('.desc');     desc.textContent = i.description;     documentFragment.appendChild(el);        }); document.body.appendChild(documentFragment);
}
console.time('render time');
render(getUpdatedProducts());
console.timeEnd('render time');