Jquery: add one line to each class

Question

I have class dot and have html code like that:

<span class="dot">Text1</span>
<span class="dot">Text2</span>
<span class="dot">Text3</span>

I want to add to each element who has class dot additional text automatically. For example, add • code that it would be

<span class="dot">&#8226; Text1</span>
<span class="dot">&#8226; Text2</span>
<span class="dot">&#8226; Text3</span>

I imagine it should be done with jquery, so any help?

Thanks.

Answer 1

Try using the prepend method:

jQuery(".dot").prepend("•");

Answer 2

$('.dot').text(function(index, old_text){return '\u2022 ' + old_text;});

Answer 3

How about using CSS instead of javascript? http://jsfiddle.net/SEvkJ/

​.dot:before {
    content: '\2022';
}

---

EDIT: If you want a space in there, then do this: http://jsfiddle.net/SEvkJ/1/

.dot:before {
    content: '\2022\00A0';
}