The following will allow you to add a particular piece of code either within or after any HTML element on the page, for example, place
1 | code |
after all
1 | <h1> |
tags on the page.
A perfect example of this would be the above social networking links next to the main heading on this page. They are an automatic feature of this website and appear within all
1 | <h1> |
tags without the need to be added as each new page is created.
This technique is an extremely useful way to automate features of a website allowing for inexperienced users to avoid coding (ie client websites).
The absolute simplest way to recreate this is by using jQuery. It can be applied to static pages or added to WordPress themes as well as other various CMS themes.
If you don’t already use jQuery you should (it’s awesome). You can learn more about it here.
You may need to attach jQuery to your document as well if it is not attached already, add the following to the ‘head’ of your page:
1 | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> |
To place code after an element place the following in the ‘head’ section of your page below previous code:
1 2 3 4 5 | <script type="text/css"> $(document).ready(){ $(h1).after('some code or text here') } </script> |
In the example above you can see
1 | .after() |
, between the
1 | () |
you can add whatever you want ie code or text (wrapped in
1 | ' ' |
) and it will show up after every
1 | <h1> |
on the page automatically.
So to make a div with the class ‘example’ display after all divs with the id #main:
1 2 3 4 5 | <script type="text/css"> $(document).ready(){ $('#main').after('<div class"example"></div>') } </script> |
As you can see, this can be applied to elements, classes or id’s within your page.
If you want to place your content within an element, for example inside a
1 | <h1></h1> |
tag, you can use
1 | .append() |
instead of
1 | .after() |
.
Follow these links for a complete reference to .append() and .after().
