jquery - 在 div 内添加包含在标签中的选定文本

Question

单击列表项时，它会出现在带有“schtuff”类的 div 中，我还希望它将每个单词包装在一个跨度内（这样我就可以设置它的样式或稍后再单击删除它们）。

我想每次都使用我在其中单击的文本创建一个新的跨度标签，而不更改其他跨度标签。脚本：

<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>

问题是它在执行此操作时会附加到其他跨度标签。

Answer 1

尝试改变

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

到

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

Answer 2

用这个 ：

$('.shtuff li').click(function(){
   $('.display').append($("<span></span>").text($(this).text()));  
});