Question

98

jQuery adding elements to parent

rated 0 times [ 100] [ 2] / answers: 1 / hits: 44605 / 12 Years ago, thu, june 28, 2012, 12:00:00

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.

Example of desired result

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darennevina

Add To Favorites

Follow

Total Points: 422

Total Questions: 128

Total Answers: 105

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

darennevina questions

1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'address')

Sun, Jun 5, 22, 00:00, 2 Years ago

1 change the active list when scrolling navbar

Fri, Nov 12, 21, 00:00, 3 Years ago

1 DiscordjsError: Request to use token, but token was unavailable to the client

Wed, Nov 25, 20, 00:00, 4 Years ago

1 How to check a checkbox in Google Apps Script and uncheck all the other cells?

Wed, Sep 23, 20, 00:00, 4 Years ago

1 How do I extract data from this NodeList?

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 12 Years ago kenyonc · Accepted Answer

Even though @am not i am has the correct code. There is no explanation of why your code fails, and I think that's the answer you are asking for.

There are several problems in your code:

First

//Add a new UL to the parent and save it as newul           

var newul = parent.add(ul);

The 'ul' is a selector and so is going to search the DOM for other <ul> elements, rather than create a new one. Also, parent.add() method is returning the parent object, not the ul's that you selected.

Correct code:

//Add a new UL to the parent and save it as newul           

var newul = $(<ul>).appendTo(parent);

Second:

//Add a new li to the new UL            

newli = newul.add('li');

Same problem again, and since newul is actually still the parent you're getting all types of craziness. Also, you're missing a var, but maybe I just don't get your closure.

Correct code:

//Add a new li to the new UL         

var newli = $(<li>).appendTo(newul);

That's all. If you fix that in your code, it'll work.

However, unless you really need those references to persist, better performance is usually achieved if you pass the whole thing as a string:

$('button').click( function() {



  $(this).parent()

    .append(

      $('<ul class=newul><li><button></li></ul>')

    );

});

Edit

And if you wanted all the new buttons to have the same functionality, use the on() method and a class for your buttons:

$('body').on('click', 'button.ul-appending', function() {



  $(this).parent()

    .append(

      $('<ul class=newul><li><button class=ul-appending></li></ul>')

    );

});

You could change the 'body' selector to something much more specific so this doesn't get queried on every click on your page. Just make sure to add the class ul-appending to all the existing buttons that aren't generated by this handler.

jQuery adding elements to parent

Answers

Edit

JSFiddle

darennevina