添加包含在div内的标记中的选定文本

Question

当单击列表项时,它出现在带有"schtuff"类的div中我还希望它将每个单词包装在一个span中(所以我可以设置它或者稍后再点击一次删除它们).

我希望每次都使用我在其中单击的文本创建一个新的span标记,而不更改其他span标记.脚本:

<script>
$(document).ready(function(){

$('.shtuff li').click(function(){
//var thistext= $(this).text();

$('.display').append("<span></span>");  

$('.display span').append($(this).text());  
    });

  });//ready
 </script>

CSS:

<style>
.display span{background-color:#ccc;}
.display{border:1px solid; width:300px;hieght:100px}
ul li {list-style-type:none;}

</style>

HTML:

<div class="display">some text</div>
<ul class="shtuff">
<li>blueberry </li>
<li>cherry </li>
<li>strawberry  </li>
<li>ferret droppings </li>
</ul>

问题是它会附加到其他span标记,因为它会这样做.

Answer 1

尝试改变

$('.display').append("<span></span>");   

至

$('.display').append("<span>" + $(this).text() + "</span>");