How do I style plain text within elements using jQuery?

jquery add text to div
jquery replace text in div
jquery contains
jquery innerhtml
jquery get span text
jquery each
jquery find text
jquery append multiple elements

Using jQuery’s .css() method, how can I style the plain text after span.foo for each list item in the following HTML structure?

Specifically, I need to get the text after each span.foo (without knowing what it is) and color it red.

<li>
    not this text
    <span class='foo'>not this text</span>
    this text
</li>
<li>
    not this text
    <span class="foo">not this text</span>
    and this text
</li>
<li>
    not this text
    <span class='foo'>not this text</span>
    and this text as well
</li>

$().css('color', 'red');

You will have to select the span and than you need to select the text element after it. To style it, you will need to wrap it in another element.

$('ul li span').each( (i, elem) => { // function (i, elem) {
   $(elem.nextSibling).wrap('<span class="special"/>')
});

  
.special {
  color: #CFC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
    not this text
    <span class='foo'>not this text</span>
    this text
</li>
<li>
    not this text
    <span class="foo">not this text</span>
    and this text
</li>
<li>
    not this text
    <span class='foo'>not this text</span>
    and this text as well
</li>
</ul>

.text(), Get the combined text contents of each element in the set of matched elements, method returns the value of text and CDATA nodes as well as element nodes. The text () method sets or returns the text content of the selected elements. When this method is used to return content, it returns the text content of all matched elements (HTML markup will be removed). When this method is used to set content, it overwrites the content of ALL matched elements. Tip: To set or return the innerHTML (text + HTML markup) of the selected elements, use the html () method.

Not sure if this is 100% true to the question as the jQuery will alter the html, but you do not need to alter the html at source (which I think is the sentiment behind the statement).

$(function () {
    $("li").each(function (item) {
        $(this).contents().filter(function () {
            return this.nodeType === 3;
        }).last().wrap("<span class='text-red'></span>");
    });
});
.text-red {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li>
    not this text
    <span class='foo'>not this text</span>
    this text
</li>
<li>
    not this text
    <span class="foo">not this text</span>
    and this text
</li>
<li>
    not this text
    <span class='foo'>not this text</span>
    and this text as well
</li>

.contents(), children() methods are similar, except that the former includes text nodes and comment nodes as well as HTML elements in the resulting jQuery object. Please​  jQuery text Method – how to use this method with selected text elements. Here you will learn how use text() method. jQuery text() Method. The text method is used for set or return the content of the selected HTML elements. When setting content, it overwrites the content of all matching elements.

It takes a little bit of finagling, since it's a raw text node, not an element, but here.

Naturally, to style the node, we need to wrap it in something; I chose an anonymous span that's styled inline.

$("span.foo").each(function() {
  var node = this.nextSibling;
  if (node.nodeType == 3) { // see if the next node is actually a text node
    var $el = $("<span>")
      .text(node.textContent)
      .css("color", "orange"); // create a wrapper element and style it
    node.replaceWith($el[0]); // replace the text node with our new span element.
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  not this text
  <span class='foo'>not this text</span> this text
</li>
<li>
  not this text
  <span class="foo">not this text</span> and this text
</li>
<li>
  not this text
  <span class='foo'>not this text</span> and this text as well
</li>

.wrapInner(), Receives the index position of the element in the set as an argument. Within the This will cause each <div> to have a class corresponding to the text it wraps:  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more How do I Get Plain Text Beside an HTML Element using jQuery?

.html(), Get the HTML contents of the first element in the set of matched elements or set the HTML <title>html demo</title>. <style>. p {. margin: 8px;. font-size: 20px;. color: blue; A string of HTML to set as the content of each matched element. Answer: Use the jQuery text () method. You can simply use the jQuery text () method to get all the text content inside an element. The text () method also return the text content of child elements. Let's take a look at an example to understand how this method basically works:

.css(), Get the value of a computed style property for the first element in the set of matched As of jQuery 1.9, passing an array of style properties to .css() will result in an object Get the width, height, text color, and background color of a clicked div. Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

jQuery text() Method, Specifies a function that returns the new text content for the selected elements. index - Returns the index position of the element in the set; currentcontent  I tried creating a jquery object with a plain-text string of html like: $(htmlStr); This appears to give me a plain array of elements and textnodes, not

Comments
  • "without changing the HTML itself" - that's not possible. You will have to wrap the text in something that can be styled. Maybe not hard-coded in the markup but at least programmatically with jQuery/JavaScript
  • Andreas is right. The text on its own cannot be styled - only HTML elements can. So either you style the whole li (possibly with a clause to exclude the inner span if that's appropriate) or you modify the HTML so that that bit of text is wrapped within its own element (e.g. another span perhaps) and is therefore style-able. As mentioned, you needn't necessarily modify the raw HTML if that's impractical...script could be used to manipulate things instead once the page is loaded.
  • @Andreas is right. At least put it inside a span called something called "colored". Will be easy task than, and do not change anything that you already have.
  • Sorry, I misspoke. I would be able to wrap the plain text in an element using jQuery. I have edited my question to reflect that.
  • @IslamElshobokshy the question very clearly refers to modifying the text after each span.foo, not within it. I suggest you read it a bit more carefully.
  • Wonderful! Thanks!