jquery $(document).ready and reading div content on load

Anyone know why this isnt working?

css

#test1
{
    height: 50px;
    border: 1px solid black;
}

#test2
{
    height: 50px;
    color: red;
    border: 1px solid black;
}

html

<div id="test1">
    test<br />
    Text
</div>
<br />
<div id="test2">
</div>

jquery

$(document).ready(function(){
    if($("#test1").val() != "")
    {
        $("#test2").val($("#t开发者_JAVA百科est1").val());
        $("#test2").val("");
    }
});

I also have a link of the code here to play with: http://jsfiddle.net/FDe9N/4/

on the $(document).ready doesnt the site fully load before executing the code? and if so doesnt that mean the div should already contain the text? the code doesnt hit the code in the if statement as if the div was empty when in fact it does have text in it... Thanks in advance!

val() only gets or sets the value of form elements. Since you're using <div> elements, you should use text() or html() instead:

$(document).ready(function() {
    if ($("#test1").html() != "") {
        $("#test2").html($("#test1").html());
        $("#test1").empty();
    }
});

Use .html() not .val(). Val is for form elements.