Javascript-форум - [ajax, post]Заменить часть html на возвращённый с сервера

Добрый день.

Учебный проект с использованием ajax и jQuery: есть форма, есть код проверки на правильность введённых значений на стороне клиента (используется jquery validate), на submitHandler навешан вызов моей функции, которая перехватывает отсылку post-запроса на сервер.
С помощью $.post получает ответ сервера: это код новой версии этой страницы целиком и я хочу выдернуть часть html-кода из этого ответа и заменить им "устаревшие" элементы на странице.

$(function () {
    $("form[action$='/Board/SetNumberOfHands']").validate({
        submitHandler: function (form) {
            if ($(form).find("input").attr("name") == "numberOfHands")
                setNumberOfHands(form);
            else if ($(form).find("input").attr("name") == "curHand")
                calculateForHand(form);
            return false;
        },
... });

Сама страница имеет вид:

...
    <script src="../../Scripts/jquery-1.4.1.min.js"" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate-vsdoc.js" type="text/javascript"></script> 
    <script src="../../Scripts/code.js" type="text/javascript"></script>
</head>
<body>
    <div id="board">
        <div id="hand1" class="hands">
        	<a...><img... /></a>
        </div>
        <div id="hand2" class="hands">
        	<a...><img... /></a>
        </div>
        <div id="hand3" class="hands">
        	<a...><img... /></a>
        </div>
        <div id="hand4" class="hands">
	        <a...><img... /></a>
        </div>
        <div id="boardHand" class="hands">
        	<a...><img... /></a>
        </div>
        <div id="#errorMsgBox" class="field-validation-error"></div>
</div>
...
<p>
        <a href...><!-- ссылка, которую сначала не видно --></a>
        <span id="result">
                <!-- всякий текст -->
        </span>
        <span id="numberOfHandsSpan">
                Количество игроков:<br />
                <!-- тут наша форма -->
        </span>
        <span id="calcSpan">
                ... <!-- тут ещё одна форма (не та, post которой сейчас обрабываем) -->
        </span>
</p>

Сначала был такой код:

// обрабатываем отсылку формы 'setNumberOfHands'
function setNumberOfHands(form) {
    $.post($(form).attr("action"), $(form).serialize(), function (response) {
        $("#board").html($(response).find("#board").html());
        $("#calcSpan").html($(response).find("#calcSpan").html());
    });
}

calcSpan отлично заменялся, но вот board нет: вместо старой структуры вложенных div'ов оставался пустой <div id="board"></div>

Тогда я решил обрабатывать поотдельности (и включил и другие элементы):

// обрабатываем отсылку формы 'setNumberOfHands'
function setNumberOfHands(form) {
    $.post($(form).attr("action"), $(form).serialize(), function (response) {
        $("#hand1").html($(response).find("#hand1").html());
        $("#hand2").html($(response).find("#hand2").html());
        $("#hand3").html($(response).find("#hand3").html());
        $("#hand4").html($(response).find("#hand4").html());
        $("#boardHand").html($(response).find("#boardHand").html());
        $("#errorMsgBox").html($(response).find("#errorMsgBox").html());
        $("#pack").html($(response).find("#pack").html());
        $("#shuffle").html($(response).find("#shuffle").html());
        $("#result").html($(response).find("#result").html());
        $("#calcSpan").html($(response).find("#calcSpan").html());
    });

Всё заработала. До этого пробовал использовать replaceWith:
$("#board").replaceWith(...)
Не работало и для невложенных тэгов.

Проект учебный, поэтому и такая неэффективность: загрузка всей страницы с сервера, прошу не указывать на этот факт, мне важно отработать использование ajax и jquery.

Прошу объяснить причину такого поведения и как наиболее эффективно можно работать со вложенными тэгами в подобных случаях?

Долго рылся в инете, ничего не нашёл, надеюсь на вашу помощь. Спасибо.