You have two separate problems with quotes there. One is the jQuery selector quotes and the other the quotes within the div's js attributes.
First, by convention, consider using single quote inside of jQuery selectors so that you can use double quotes as needed for HTML attributes and the like.
$('<div id="this-is-fine"></div>').blah();
Second, when you have to have more than two quote types in the selector, you can escape them with a backslash(\).
$('<div onmouseover="mOver(this,\'Fred Flintstone\')" onmouseout="mOut(this,\'F3-R06\')" style="background-color:#D94A38;width:30px;height:30px;padding:20px">F3-R06</div>').appendTo('body');
Third, maybe consider drinking a little more of the jQuery Kool-Aid.
jQuery('<div>F3-R06</div>')
.attr('onmouseover', 'mOver(this, "Fred")')
.attr('onmouseout', 'mOver(this, "F3-R06")')
.css({
'background-color' : '#D94A38',
'width' : '30px',
'height' : '30px',
'padding' : '20px'
})
.appendTo('body');
Slightly more kool-aid gets you here:
$('<div data-alt-text="Fred">F3-R06</div>')
.hover(function (){ //first is mouseenter
altText($(this));
},
function () { // second is mouseleave
altText($(this));
})
.addClass('f3-box') // css is handy.
.appendTo('body');
function altText ($obj){
var text = $obj.text();
// wang dang and reverse it - ms elliot
$obj.text( $obj.attr('data-alt-text') );
$obj.attr('data-alt-text', text )
}
<style>
.f3-box{
background-color: #D94A38,
width: 30px,
height: 30px,
padding: 20px
}
</style>
More on .hover() in the jquery docs