Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Jeremy Frimond
Jeremy Frimond
14,470 Points
Posted by Jeremy Frimond
Jeremy Frimond
14,470 Points

How to add html between an <a></a> if a class is present

I would like to add some html to an <a> tag if a class is present specifically:

if ( class == "current-menu-item" ) { add "> >" (or my desired html string) to the space between the <a></a> tags }

The desired effect is to add this html to the active link on the page. I am not sure how to write this to make it happen. Im also not sure if this should be in another forum category.

Cheers

1 Answer

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

PHP is a server side language so when ever you generate the tag with that class you can add your string then. If you are trying to modify existing HTML that you are not generating with PHP then you could use javaScript/jQuery. You can copy this code and run it in a browser to see it in action if the comments don't make sense. 

<!DOCTYPE html>
<html>
    <head>
        <title>Add HTML</title>
    </head>
    <body>
        <a href="#" class="current-menu-item">Link</a>

        <!-- get jQuery -->
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script>
            // when the page has loaded
            $(document).ready(function(){
                // get the element with class "current-menu-item" and append text
                $( ".current-menu-item" ).append( " >>" );
            });
        </script>  
    </body>
</html>