把div元素之间的html元素

我需要把一个H2元素div类productDescription;把div元素之间的html元素

我的代码：

$(document).ready(function() {  
    $('.productDescription').append($('<h2>'));  
    $('.productDescription').prepend($('</h2>'));  });

<div class="productDescription">Bota cano curto d</div>

我需要：

<div class="productDescription"><h2>Bota cano curto d </h2></div>

var $h2 = $('<h2></h2>'); 
$h2.text('Whatever you want'); 
$('.productDescription').append($h2);

尝试：

$('.productDescription').html("<h2>"+ $('.productDescription').html() +"</h2>");

这段代码有工作，无论在.productDescription格文本

$(document).ready(function() { 
    $('.productDescription').append($('<h2>').html("Whatever")); 
});