Edit in JSFiddle

 $(document).ready(function () {
                var css = { 'font-family': 'comic sans ms',
                    'color': 'green',
                    'font-size': '24px'
                };
                $("#wrapEM").click(function () {
                    $("#parentDiv").contents().filter("em").css(css);
                });
                $("#wrapP").click(function () {
                    $("#parentDiv").contents().filter("p").css(css);
                });
                $("#wrapI").click(function () {
                    $("#parentDiv").contents().filter("i").css(css);
                });
                $("#wrapSpan").click(function () {
                    $("#parentDiv").contents().filter("span").css(css);
                });
                $("#reset").click(function () {
                    location.reload();
                });
            });

<html>
        <head>
        <title>contents</title>
        </head>
        <body>
        <div id="parentDiv">
        <em>This is em element.</em>
        <p>This is paragraph element.</p>
        <i>This is i element.</i><br />
        <span>This is span element.</span><br /><br />
        </div>
        <input type="button" id="wrapEM" value="contents() filter by EM"/>
        <input type="button" id="wrapP" value="contents() filter by p"/>
        <input type="button" id="wrapI" value="contents() filter by i"/>
        <input type="button" id="wrapSpan" value="contents() filter by span"/>
        <input type="button" id="reset" value="Reset" />
        </body>
        </html>