Question

I would like to add the content of a hidden span that is nested in an “a” element into another element on the page. Ideally, I’d like the content of the span injected into the other element, not the span tags themselves.

<script type="text/javascript">
    $(document).ready(function() {
        $(".test").hover(function() {

            var rolloverText = $(this).children("span");
            $("#rollover_text").html(rolloverText);
        });
    });
</script>

And the html is like this:

<div id="rollover_holder">
     <h3 id="your_family">Your Family</h3>
     <div id="rollover_image_top_left">
         <a href="#" class="test" title="Your Family"></a><span>test text</span>
     </div>  
</div>
<div id="rollover_text">

</div>

It doesn’t seem to be working for me 🙁

Answer 1

2 problems :
The “span” tag isn’t included in your “a” tag, so the children function won’t work, and the rolloverText variable contains the span element itself when you do :

var rolloverText = $(this).children("span");

If you want the textual content of this element, you have to use the .text() function.

var rolloverText = $(this).children("span").text();

Seems to work with that 😉