I am learning jQuery . I want to make it so that when I click on the button , li added to the ul list. I try to do it and do not understand why it does not work:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <script src="jquery-1.10.2.js"></script> <script> $(document).ready(function () { $("#superButton").on("click", addLiToUl); function addLiToUl() { $("p > ul").append("<li>Hello!</li>"); } }); </script> </head> <body> <p> <ul> Some things:</ul> </p> <input id="superButton" type="button" value="the button"/> </body> </html>

    1 answer 1

    ul is a block element, and cannot be inside a p element. Therefore, the browser changes the markup to the following

     <p></p> <ul> Some things:</ul> <p></p>

    And in this form, the selector p>ul returns an empty collection.

     $(document).ready(function() { $("#superButton").on("click", addLiToUl); function addLiToUl() { $("ul").append("<li>Hello!</li>"); } }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul>Some things:</ul> <input id="superButton" type="button" value="the button" />