jQuery <ol> add new <li> to the end

Introduction

You can add or insert elements to DOM using the jQuery append() or prepend() methods.

The jQuery append() method insert content to end of matched elements,

The prepend() method insert content to the beginning of matched elements.

View in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Elements to DOM</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("ol").append("<li>list item</li>");
        });/*from   ww  w. j  a va  2s .c om*/
    });
</script>
</head>
<body>
    <button>Add new list item</button>
    <ol>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ol>
</body>
</html>



PreviousNext

Related