How to change the content of the Span using jQuery?

JqueryHtmlCss

Jquery Problem Overview


<span class="stbuttontext" st_page="home">ShareThis</span>

I want to change "Share This" to "Share",

please let me know the solution.

thanksl,

Jquery Solutions


Solution 1 - Jquery

You can do with either:

$('.stbuttontext').text('Share');

for textual content or

$('.stbuttontext').html('Share');

for html contents.

In your case however, the first statement should be fine :)

Solution 2 - Jquery

This is my way of thinking about when to use .html() vs. .text().

Use .html() when you want to add styling with html tags to the text you are replacing, like:

$('.stbuttontext').html('<strong>Share</strong>');

This is ofter useful when you are displaying an error message because you may want to add a class to change the color of the text.

$('#error').html('<span class="errortext red"><strong>Error:</strong> <em>Fix your email address</em></span>');`

Use .text() when you simply want to change the text.

So if you did the above example with .text:

$('#error').text('<span class="errortext red"><strong>Error:</strong> <em>Fix your email address</em></span>');

The text the user will see on the web page is (without the spaces in the tags, I could not figure out how to get it to work with this markdown editor).

< span class="errortext red">< strong>Error: < em>Fix your email address< /em>< /span>

and that text is not red, or have bold or italic text.

Solution 3 - Jquery

> $('.stbuttontext').html('Share');

Solution 4 - Jquery

$('.stbuttontext').html('Share');

Will change the text of all spans with the class stbuttontext.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSwati SharmaView Question on Stackoverflow
Solution 1 - JquerySarfrazView Answer on Stackoverflow
Solution 2 - JqueryChristopher AltmanView Answer on Stackoverflow
Solution 3 - JqueryFitzchak YitzchakiView Answer on Stackoverflow
Solution 4 - JqueryEgor PavlikhinView Answer on Stackoverflow