Edit Question - KnowledgeHub

Title Body

I'm having some trouble figuring out how to add elements to a parent object on a click event. The result that i'm hoping to achieve is this: <ul> <li><button>B1</button> <ul class="newul"> <li><button>B1.1</button> <ul class="newul"> <li><button>1.1.1</button></li> <li><button>1.1.2</button></li> </ul> </li> <li><button>B1.1</button></li> </ul> </li> <li><button>B2</button></li> <li><button>B3</button></li> </ul> Let's say I click button B2. I want a new UL added to the parent LI of that button and then be able to add new LI elements to the newly created UL. I hope that makes sense! So basically, click button, add new UL with class "newul" to the LI you're currently in -> add new LI's to that newly created UL. The jquery I'm currently using is as follows: $('button').click(function(){ //Get parent.. var parent = $(this).parent(); //Add a new UL to the parent and save it as newul var newul = parent.add("ul"); //Add the class to the new UL newul.addClass('newul'); //Add a new li to the new UL newli = newul.add('li'); //Add a button to the new LI newli.append('<button></button>'); }); Unfortunately, this is having completely undesired effects and sticks buttons everywhere all over the place. I'd appreciate any help you can offer. Here's a visible example of what i'm after. The top part is the effect id like to achieve. <a

Tags (comma-separated) Cancel