JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content"></div>
CSS
html, body {
width: 100%;
height: 100%;
}
#content {
height: 9000px;
}
JavaScript
var getEl = function(str){
return document.getElementById(str);
};
var clearNode = function(node){
while(node.childNodes.length != 0){
node.removeChild(node.firstChild);
}
return node;
};
var foreach = function(o, handler){
for(var key in o){
if(o.hasOwnProperty(key)){
handler(key, o[key]);
}
}
};
var node = function(){
var args = arguments,
element = document.createElement(args[0]);
if(typeof args[1] != 'undefined'){
if(typeof args[1] == 'string' || typeof args[1] == 'number'){
element.appendChild(document.createTextNode(args[1]));
}else if(args[1].constructor == Object){
foreach(args[1], function(key, value){
if(key == 'innerHTML'){
element.innerHTML = value;
}else if(key == 'class'){
element.className = value;
}else{
element.setAttribute(key, value);
}
});
}else{
for(var i = 1, l = args.length; i < l; i++){
if(args[i].nodeType){ element.appendChild(args[i]); }
}
}
}
if(typeof args[2] != 'undefined'){
if(typeof args[2] == 'string' || typeof args[2] == 'number'){
element.appendChild(document.createTextNode(args[2]));
}else{
for(var i = 2, l = args.length; i < l; i++){
if(args[i].nodeType){ element.appendChild(args[i]); }
}
}
}
return element;
};
var handler = function(){
var el = getEl('content');
clearNode(el).appendChild(
node('div',
node('div', document.body.offsetHeight),
node('div', document.documentElement.offsetHeight),
node('div', document.documentElement.scrollHeight),
node('div', window.innerHeight)
)
);
};
handler();