jquery append 的问题

Question

做法：
1.把阴影赋值给一个变量$mask, 把文字赋值给一个变量$selected ；
var $mask = $('<div class="material_pop_mask"></div>');
var $selected = $('dkdkkd');

1. 鼠标移上去，把变量$mask 和 变量$selected 的值 通过append 添加到对象里

疑问：通过append 把赋值的变量添加到（第二个对象，第二张图右边的这个对象）里后，左边在我没有做“去除之前添加的内容”操作的情况 自动去除了，

 通过“赋值变量”然后把这个变量给append，当前的对象添加后，其他的兄弟节点就会去除之前已添加的内容；
 如：$(this).parent().append($mask);
 
 如果直接把需要添加的内容给append 其他已经添加内容的兄弟节点就不会去除。
 如：$(this).parent().append('<i class="icon_card_selected">dkdkkd</i>');
 
 
 想问下各位这是什么原因呢？

以下是测试的内容：

<style>
        .material_pop_box_item{width: 280px;border:1px solid #e7e6ec;padding: 15px;margin-bottom: 20px;margin-left: 10px;margin-right: 10px;float: left; position: relative}
        .material_pop_box_item .material_pop_mask{width: 100%;height: 100%;position: absolute;top: 0;opacity: 0.6;filter:alpha(opacity=60s);left: 0;cursor: pointer;background: #000;z-index: 998;}
        .material_pop_box_item .icon_card_selected{display: inline-block; width: 46px; height: 46px; position: absolute;top: 50%;left: 50%;margin-top: -23px;margin-left: -23px;z-index: 999;}

    </style>

    <ul>
        <li class="material_pop_box_item"><img src="image/1b4c510fd9f9d72ada5eb61bd62a2834349bbbfa.jpg"></li>
        <li class="material_pop_box_item"><img src="image/1b4c510fd9f9d72ada5eb61bd62a2834349bbbfa.jpg"></li>
    </ul>

    <script>
        var $mask = $('<div class="material_pop_mask"></div>');
        var $selected = $('<i class="icon_card_selected">dkdkkd</i>');
        //var $_mask = $mask.clone();
        $(".material_pop_box_item").hover(function(){
                    $(this).append($mask);
                }
        )

        $(document).on("click",".material_pop_mask",function(){
            $(this).parent().append($selected);
        });
    </script>

Answer 1

Each inner <div> element gets this new content:

<h2>Greetings</h2>
<div class="container">
 <div class="inner">
   Hello
   <p>Test</p>
 </div>
 <div class="inner">
   Goodbye
   <p>Test</p>
 </div>
</div>

You can also select an element on the page and insert it into another:

$( ".container" ).append( $( "h2" ) );

If an element selected this way is inserted into a single location elsewhere in the >DOM, it will be moved into the target (not cloned):

<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">Goodbye</div>
 <h2>Greetings</h2>
</div>

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

官方文档给的说法是:
If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):

也就是$mask如果能在DOM树能找到那么将会把$mask从节点位置上删除并且移动到append指定的位置上

还有
Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.
如果append的到N个DOM对象上，那么前N-1的对象apppend上去的是对象的copy，而最后是一个是原对象。
如果接下再执行一个A.append($mask);,那么之前append到最后一个DOM上的$mask将被移除而添加到新对象上A

Answer 2

$mask和$selected都是引用类型，只实例化了一个对象，你把它们缓存起来使用了，就是说从头到尾你都在对最初实例化的对象进行操作，而你写成字符串的时候每次都会重新实例化一个对象，所以就造成了你说的这种效果