How to take text from one place then render at other place on same page?

Question

<div id="default">
<h2> heading </h2>

<div id="big-on-hover">
<h2> heading </h2>

I want to render the text of h2 of <div id="default"> in <div id="big-on-hover"> because both will be same always so I will change at one place it will show all other places also.

Answer 1

You could try something like this:

$(document).ready(function() {
            $('#default h2').mouseover(function() {

            var text = $('#default h2').html();
            $('#big-on-hover h2').html(text);
            });
        });

Answer 2

If i understood it correctly this is what you want.

jQuery(document).ready(function(){
    jQuery('#default').hover(function(){
        var hoverhtml = "<h2>" + jQuery('#default h2').html() + "</h2>" + jQuery('#big-on-hover').html();
        jQuery('#big-on-hover').html(hoverhtml);
    },
    function(){
        jQuery('#big-on-hover h2').remove();;
    });
});