JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li><a href="#empty" id="empty">Empty</a></li>
<li><a href="#fill" id="fill">Fill</a></li>
</ul>
CSS
ul {display: block; list-style: none; margin:0; padding: 0; overflow: hidden;}
ul li {list-style: none; display: block; float: left; margin-right: 5px;}
ul li a {display: block; padding: 3px 10px; background: #ccc; text-decoration: none;}
div.node-wrapper {margin: 10px 0; border-bottom: 1px #333 solid;padding: 5px; background: #efefef;}
div.node-wrapper p {margin:0;}
JavaScript
var Demo = function(texts){
this.initialize(texts);
};
Demo.prototype = {
ogTexts:[]
,nodes:{}
,initialize: function(texts){
this.ogTexts = texts;
var i =0;
for(;i<texts.length;i++){
var text = texts[i];
this.buildElement(text);
}
}
,reset: function(){
this.getWrapper().innerHTML = '';
}
,getWrapper: function(){
return this.container || this.buildWrapper();
}
,buildWrapper: function(){
this.container = document.createElement('DIV');
this.container.setAttribute('class','demo-wrapper');
return this.container;
}
,fillWrapper: function(){
var i = 0
,frag = document.createDocumentFragment()
,wrapper = this.getWrapper();
for(var node in this.nodes){
frag.appendChild(this.nodes[node]);
}
wrapper.innerHTML = '';
wrapper.appendChild(frag);
}
,buildElement: function(text){
var node = this.nodes[text] = document.createElement('DIV');
node.setAttribute('class','node-wrapper');
var p = document.createElement('P');
p.appendChild(document.createTextNode(text));
jQuery(node).append(p);
return node;
}
};
jQuery(function(){
var NS = new Demo([
'test 1'
,'test 2'
,'test 3'
,'test 4'
]);
document.body.appendChild(NS.getWrapper());
var empty = document.getElementById('empty');
empty.addEventListener('click',function(event){
event.preventDefault();
NS.reset()
});
var fill = document.getElementById('fill');
fill.addEventListener('click',function(event){
event.preventDefault();
NS.fillWrapper()
});
});