So I have tried to learn a little about jQuery and its DOM functions and this is what I have managed to do today – an example with “insertBefore”, “prependTo”, “insertAfter” and “appendTo”.
Pretty much that is what the example does – it adds a note to all the links in the text. In my case it is only one:
Furthermore, with jQuery I have managed to make some anchors, e.g. “go to the bottom” and “return to the top”. As far as I was interested in PHP as well, the text is generated with it. Last but not least, there is the date displayed with jQuery. And that is all! 🙂
The code is available in GitHub and here:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="grune" /> <title>DOM 2</title> </head> <body> <div class ="my_site"> Vitoshacademy.com is not an academy, but just a nice internet side for coding. </br> Also known as <a href="http://www.vitoshacademy.com">used to have another domain!</a><br /> <?php for ($x = 0; $x <= 99; $x++) { echo "So here comes a lot of test code. Line number $x </br>"; } ?> <div id="my_div_id"> Div in a div!</br> </div> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" ></script> <script> $(document).ready(function(){ $('div.my_site a').attr({ rel: 'external', title: 'Click to see that I own it! :)' }); $('<a href="#top">return to the top</a>').insertAfter('div.my_site'); $('<a id="top"></a>').prependTo('body'); $('<a href="#bottom">go to the bottom</a>').insertBefore('div.my_site'); $('<a id="bottom"></a>').appendTo('body'); $('#my_div_id').prepend('<hr>'); $('#my_div_id').append(new Date().toLocaleString()); $('#my_div_id').append('<hr>'); }); </script> </html> |
Enjoy it! 😀