Skip to content
Related Articles
Open in App
Not now

Related Articles

How to select text nodes using jQuery ?

Improve Article
Save Article
  • Last Updated : 15 Nov, 2019
Improve Article
Save Article

Text nodes are a type of node that denotes the actual text inside an element. The textNodes of any element can be selected using jQuery by selecting all the nodes and using the filter() method to check the nodeType property.

The required element is first selected using the jQuery selector. The contents() method is used on selected elements. This method is used to return the direct children of an element including all the text and comment nodes.

The filter() method is used on these returned elements to filter only the text nodes required. The custom filter function checks if the nodeType property of the nodes return equal to the Node.TEXT_NODE value.

The “Node.TEXT_NODE” value is used to identify a text node from other nodes. Alternatively, the integer value “3” could also be used to identify a text node. The filter() method will now only return the nodes that are textNodes. Therefore this method can be used to select the textNodes of any element.


selectedElement = $("elementRequired").contents();
textNodes = selectedElement.filter(function () {
  return this.nodeType === Node.TEXT_NODE;


<!DOCTYPE html>
        How to select text nodes using jQuery?
    <script src=
    <h1 style="color: green">
        How to select text nodes using jQuery?
    <p class="example">
        This is line 1<br>
        This is line 2<br>
        This is line 3
    <button onclick="getTextNodes()">
        Click to get Text Nodes
    <script type="text/javascript">
        function getTextNodes() {
            selectedElement = $(".example").contents();
            textNodes = selectedElement.filter(function ()
                return this.nodeType === Node.TEXT_NODE;


  • Display:
  • Console:

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!