Adding Elements Example

The code that follows appends, inserts, and prepends paragraphs to an existing <div> element when the button is clicked so that you can see how the dynamic inserts work. Figure 10.1 illustrates how the page looks before and after adding the elements:

01 <html> 02   <head> 03   <title>Python Phrasebook</title> 04   <meta charset="utf-8" /> 05   <script type="text/javascript" 06     src="../js/jquery-2.0.3.min.js"></script> 07   <script> 08     $(document).ready(function (){ 09       $("button").on("click", function(){ 10         $("div").prepend("<p>Paragraph 1</p>"); 11         $("div p:eq(1)").after("<p>Paragraph 3</p>"); 12         $("div").append("<p>Paragraph 5</p>"); 13       }); 14     }); ...

Get jQuery and JavaScript Phrasebook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.