jQuery вставляет значение textarea в div, не затрагивая дочерние элементы

Question

Я пытаюсь вставить значение html textarea #ta в div .yes, не затрагивая и не удаляя дочерние элементы div с классом .no. В настоящее время он удаляет все содержимое div, включая все дочерние элементы с классом .no. Проверьте jsfiddle на http://jsfiddle.net/f2rPz/.

<div class="yes">test
    <div class="no">no</div>
    <div class="no">no</div>
</div>
<textarea id="ta"></textarea>

$('#ta').keyup(function() {
    var x = $(this).val();
    $('.yes').html(x)
})

Answer 1

Посмотрите мою версию, которая заменит текст "test", но сохранит .no div.

В основном это сводится к следующему: вы хотите сохранить копию .no div'ов вне DOM, а затем присоединить их снова после замены содержимого .yes.

$('#ta').keyup(function() {
    var no = $('.yes > .no').remove();
    var x = $(this).val();
    $('.yes').html(x).append(no);
});

Если вы не хотите влиять на всех потомков, замените селектор на '.yes > *', который будет выбирать только все прямые потомки.

http://jsfiddle.net/3PA6H/1/

Answer 2

Вместо этого используйте функцию append :

$('#ta').keyup(function() {
    var x = $(this).val();
    $('.yes').append(x)
})

Answer 3

Замена html() на append() сделает это.

Обновление: вот вилка jsFiddle, показывающая результат: http://jsfiddle.net/X7YQU/