JSFiddle - React, Tailwind, and code Playground

by tara5

JavaScript

var htmlSnippetsCount = [1,2,3,4,5,10,20,30,40,50,100,200,500,1000];
var levelsOfNesting = [2,3,4,5,10,20,30,40,50,100];

var generateHtml = function(deep, htmlSnippetsCountOrLevels, combined){
    var html = html_sub =  '<div class="item">'+
                               '<div class="subitem_1">'+
                                    '<p>Text</p>'+
                                    '<p>Text</p>'+
                                    '<p>Text</p>'+
                                '</div>'+
                                '<div class="subitem_2">'+
                                    '<p>Text</p>'+
                                    '<p>Text</p>'+
                                    '<p>Text</p>'+
                                    '<p>Text</p>'+
                                '</div>'+
                            '</div>';
    if(!deep && !combined){
        for(var i = 1; i < htmlSnippetsCountOrLevels; i++){
            html+=html_sub;
        }
    }else if (deep && !combined){
         for(var i = 0; i < htmlSnippetsCountOrLevels; i++){
            var to_insert = html;
            html = '<div class="tree">' + to_insert + '</div>';
        }
    }else{
        for(var i = 0; i < htmlSnippetsCountOrLevels; i++){
            var to_insert = html;
            html = '<div class="tree">' + to_insert + '</div>';
        }
        var html_sub = html;
        for(var i = 1; i < htmlSnippetsCountOrLevels; i++){
            html+=html_sub;
        }
    }
    
    return html;
}

var addClassPrefix = function (el, elClass) {
    var $el = $(el);
  
    !!$el.parent().length || $el.remove();
    
    $el.addClass(elClass);
    
    $el.find('*').each(function(index, element){
        $(element).addClass(elClass);
    });
        
    return $el;
};

var addClassPrefixTest = function(deepParam, htmlSnippetsCountOrLevels, nodesOrLevels, combined){
    for(var j = 0; j<htmlSnippetsCountOrLevels.length; j++){
    
       ...