JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<div class="content" ng-app="myApp" ng-controller="c">
   <ul>
       <li class="folder">
           <span class="name">Root</span>
           <button class="add" ng-click="addItem()">+</button>
       </li>
    </ul>
    
</div>

CSS

.content
{
    width:300px;
    height:300px;
}

.folder
{
    list-style-type:none;
    background:cyan;
    margin-left:5px;
}
.button
{
    width:25px;
    height:25px;
    outline:none;
    cursor:pointer;
}

JavaScript

var mod = angular.module('myApp',[]);

mod.controller('c',function($scope){
    $scope.addItem = function(){
        var el = angular.element(document.getElementsByClassName('folder')[0]);
        
        el.append('<ul><li class=\"folder"\><span>Child</span> <button class=\"add\" ng-click=\"addItem()\">+</button></li></ul>');
    };

});