$(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>