Insert Text into tags before content

jquery append html

15,300

Solution 1

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

is the one you may be looking for. Or with appendTo:

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

It will however create two separate strings in the Chrome browser I use to test so you MAY want this instead

Live Demo

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

For more than one you need each

Live Demo

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

Solution 2

Could you use the jQuery prepend() or prependTo() to add your content to the front of the span? Something like:

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

Or:

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

15,300

Author by

Airman

A lover of all things code.

Updated on June 04, 2022

Comments

Airman almost 2 years
I have a question regarding jQuery. I'd like to insert one word before content in a tag. The reason being, I am using social icons and I'd like for two words to be able to be inserted before the actual span to change the variation. Here is the font I'm using: http://drinchev.github.io/monosocialiconsfont/

If I can do this using CSS, I'd love it - whatever works. I've tried using :before mind you.

Here's what it looks like... for a youtube icon I'd use:
```
youtube
```
The font reads "youtube" and makes it into the youtube symbol. IF i wanted a round icon i'd use:
```
roundedyoutube
```
I am making options for a theme, and I'd like for Social Icons style to be "regular, rounded, round" and upon selection have "rounded" or "circle" to be inserted before the youtube in the  tags. Hopefully I am making sense.

So here's the setup.
1. I have HTML code  youtube 
2. I have JS code importing the social span into a DIV: $('span.socialarea').appendTo('#socialcontainer');
3. I want a word inserted before youtube in the html code.
4. I've tried using some of the following: $('span.socialarea').add('rounded'); and $('span.socialarea').text('rounded'); and $('span.socialarea').before('rounded'); The later seemed to work the best but added it outside the span not inside.
Hope that makes sense! Short version: add a word before the content in a span tag.
Airman almost 11 years

Is this how the code should look? $(document).ready(function () { $('span.socialarea').appendTo('#socialcontainer'); $("rounded").prependTo($('span.socialarea')); });
Airman almost 11 years

Sweet, does it. However, one issue is it wont combine the two texts. They appear above each other instead of one word. Any possible way to fix this or?
Airman almost 11 years

Here is what I mean, the font is particular: d.pr/i/3N6s if there is a way to make it read it that way that'd be awesome
Airman almost 11 years

the CSS used to read "youtube" and make it into the icon is: webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased;
Airman almost 11 years

Thanks, one more issue - it's being duplicated now, here's the code I'm using: youtube aboutme and an image: d.pr/i/O0dy