CODEWITHSUNDEEP
jquery
namretiolnave
namretiolnave

Reputation: 801

Add selected text wrapped in a tag inside a div

When clicking a list item, it appears in a the div with the 'schtuff' class I also want it to wrap each word inside a span (so I can style it or remove them with another click later).

I want to be creating a new span tag each time with the text I click inside it without altering the other span tags. Script:

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

The problem is it's appending to the other span tags as it does this.

Upvotes: 0

Views: 537

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Try changing 

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

to 

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

Upvotes: 5

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382132

Use this :

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

Upvotes: 2

Related Questions