Prepend a button in each list element of unordered list using jQuery

544 views Asked by At

I am bit new in jQuery and I am trying to prepend a button in each list element of unordered list using jQuery. I thought that the following code would work for me but it did not. Is there anyone who can help a bit?

<html>
<head>
    <meta charset="utf-8" />
    <script src="scripts/jquery-2.1.1.min.js"></script>
    <title>Button add</title>
</head>
    <body>
        <script >
            var $button = $('<button>').text('Test');
            $('li').prepend($button);
        </script>

        <ul>
            <li>Item</li>
            <ul>
                <li>SubItem</li>
                <ul>
                    <li>SubSubItem</li>
                    <li>SubSubItem</li> 
                </ul>
                <li>SubItem</li>
                <li>SubItem</li>
            </ul>
        </ul>
    </body>
</html>

Edit: I am trying to insert a button before a text in each list element. Something like that:

        <ul>
            <li><button>Test</button>Item</li>
            <ul>
                <li><button>Test</button>SubItem</li>
                <ul>
                    <li><button>Test</button>SubSubItem</li>
                    <li><button>Test</button>SubSubItem</li>
                    ...
        </ul>
0

There are 0 answers