Trying to select script tags from a jQuery ajax get response

I'm on page A. A link is clicked, and I'm loading in the DOM via jQuery get from page B. Inside page B's DOM are multiple dynamically-generated script tags with the class "dataScript" along with a bunch of other script tags that I don't want anything to do with.

The only thing I want from that DOM are the .dataScript tags, which I then want to insert into a div with an ID of "scriptOutput" into the DOM of page A. This won't work if the element with the class of "dataScript" is a script tag. Only if it's some other tag, such as a "div" tag. Here's an example of what I'm trying to do:

Page A:

<html>
<head>
<title>Page A</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
 $("#ajaxJsLink").click(function() {
  $.get("pageB.html", function(data) {
   var scriptElements = $(data).find(".dataScript").contents();
   console.log(scriptElements);
   $(scriptElements).each(function(index) {
    $("#scriptOutput").append($(this).html());
   });
  });
  return false;
 });
 $("#ajaxDivsLink").click(function() {
  $.get("pageB.html", function(data) {
   var scriptElements = $(data).find(".dataDiv").contents();
   console.log(scriptElements);
   $(scriptElements).each(function(index) {
    $("#divOutput").append($(this).html());
   });
  });
  return false;
 });
});
</script>
</head>
<body>
<p>This is page A.</p>
<hr />
<p>
<a href="pageB.html" id="ajaxJsLink">Get JavaScript from Page B.</a><br />
<a href="pageB.html" id="ajaxDivsLink">Get Divs from Page B.</a>
</p>
<hr />
<div id="scriptOutput">
 <h2>Script Output</h2>
</div>
<div id="divOutput">
 <h2>Div Output</h2>
</div>
</body>
</html>

Page B:

<html>
&l