在内容之前将文本插入<span>标记

Question

我有一个关于jQuery的问题.我想在标记中的内容之前插入一个单词.是的原因,我使用社交图标,我想为两个词能够实际跨度之前插入改变的变化.这是我正在使用的字体:http://drinchev.github.io/monosocialiconsfont/

如果我能用CSS做到这一点,我会喜欢它 - 无论有用.我试过用过:先介意你.

这是它的样子......对于我使用的youtube图标:

<span class="social">youtube</span>

该字体显示为"youtube"并使其成为youtube符号.如果我想要一个圆形图标我会用:

<span class="social">roundedyoutube</span>

我正在为选择一个主题,我想为社会图标的风格是"定期,圆形,圆"和被选择后,有"四舍五入"或"圈"来之前,被插入youtube的<span>标签.希望我有意义.

所以这是设置.

1. 我有HTML代码 <span class="social"> youtube </span>
2. 我有JS代码将社交范围导入DIV: $('span.socialarea').appendTo('#socialcontainer');
3. 我想youtube在html代码之前插入一个单词.
4. 我已经使用以下一些尝试: $('span.socialarea').add('rounded'); 和 $('span.socialarea').text('rounded'); 和 $('span.socialarea').before('rounded'); 后来似乎工作最好的,但它增加的跨度之外未里面.

希望有道理!简短版本:在span标记中的内容之前添加单词.

Answer 1

前置

现场演示

$(function() {
  $('span.socialarea').prepend('rounded');
});

是你可能正在寻找的那个.或者使用appendTo:

$(function() {
  $('span.socialarea').prepend('rounded')
    .appendTo("#socialcontainer");
});

然而,它会在我用来测试的Chrome浏览器中创建两个单独的字符串,因此您可能需要这样做

现场演示

$(function() {
  var text = $('span.socialarea').text();
  $('span.socialarea').text('rounded'+text)
    .appendTo("#socialcontainer");
});

对于您需要的不止一个 each

现场演示

$(function() {
  $('span.socialarea').each(function() {
    var text = $(this).text();  
    $(this).text('circle'+text).appendTo("#socialcontainer");
  });
});