jquery - 在内容之前将文本插入标签

Question

我有一个关于 jQuery 的问题。我想在标签的内容之前插入一个单词。原因是，我正在使用社交图标，我希望能够在实际跨度之前插入两个词来更改变化。这是我正在使用的字体：http: //dinchev.github.io/monosocialiconsfont/

如果我可以使用 CSS 做到这一点，我会喜欢它——不管怎样。我试过使用 :before 介意你。

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

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

字体读取“youtube”并使其成为 youtube 符号。如果我想要一个圆形图标，我会使用：

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

我正在为一个主题制作选项，我希望社交图标样式为“常规、圆形、圆形”，并且在选择youtube时在<span>标签之前插入“圆形”或“圆形”。希望我说得通。

所以这里是设置。

1. 我有 HTML 代码<span class="social"> youtube </span>
2. 我有将社交跨度导入 DIV 的 JS 代码：$('span.socialarea').appendTo('#socialcontainer');
3. youtube我想在 html 代码中插入一个单词。
4. 我尝试过使用以下一些： $('span.socialarea').add('rounded'); and $('span.socialarea').text('rounded'); and $('span.socialarea').before('rounded'); The later 似乎效果最好，但将其添加到跨度之外而不是内部。

希望这是有道理的！短版：在 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");
  });
});

Answer 2

您可以使用 jQuery prepend()或prependTo()将您的内容添加到跨度的前面吗？就像是：

$('span.socialarea').prepend($("<p>Some new tag</p>"));

或者：

$("<p>Some new tag</p>").prependTo($('span.socialarea'));