jQuery将textarea值插入div而不影响子元素

Question

我试图在 div .yes 内插入 textarea #ta 的 html 值，而不影响或删除具有类 .no 的子 div。目前，它正在删除 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。

基本上可以归结为：您希望在 DOM 外部保留 .no div 的副本，然后在替换 .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/