How does jQuery’s .text() work, internally?

Question

I quickly tried to find the implementation in jQuery’s source, but only found this which doesn’t actually seem to define it completely.

From the jQuery Source

jQuery.fn.extend({
    text: function( text ) {
        if ( jQuery.isFunction(text) ) {
            return this.each(function() {
                return jQuery(this).text( text.call(this) );
            });
        }

        if ( typeof text !== "object" && text !== undefined ) {
            return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
        }

        return jQuery.getText( this );
    },

Anyone know?

Clarification:
I know how to use it. I just want to know how to get the text of an element à la jQuery when jQuery isn’t available.

Answer 1

It uses the Sizzle getText method:

// Utility function for retreiving the text value of an array of DOM nodes
Sizzle.getText = function( elems ) {
    var ret = "", elem;

    for ( var i = 0; elems[i]; i++ ) {
        elem = elems[i];

        // Get the text from text nodes and CDATA nodes
        if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
            ret += elem.nodeValue;

        // Traverse everything else, except comment nodes
        } else if ( elem.nodeType !== 8 ) {
            ret += Sizzle.getText( elem.childNodes );
        }
    }

    return ret;
};

http://sizzlejs.com/

Answer 2

jQuery.fn.text can be used for 3 different purposes, as the source you pasted clearly shows. The case you're looking for, is the third one - returning the text value of an element.

jQuery uses jQuery.text() method to get the text value of an element, and jQuery.text points to Sizzle.getText()

jQuery.text = Sizzle.getText;

And here's the definition of getText function.

// Utility function for retreiving the text value of an array of DOM nodes
Sizzle.getText = function( elems ) {
    var ret = "", elem;

    for ( var i = 0; elems[i]; i++ ) {
        elem = elems[i];

        // Get the text from text nodes and CDATA nodes
        if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
            ret += elem.nodeValue;

        // Traverse everything else, except comment nodes
        } else if ( elem.nodeType !== 8 ) {
            ret += Sizzle.getText( elem.childNodes );
        }
    }

    return ret;
};

Working example: http://jsfiddle.net/cBsDN/

Answer 3

If you know the different of createTextNode and createElement, you can understand how to jquery.text work.

text function create a DOM text node. The browser will tread the value of node as text.

Answer 4

var text = element.innerText || element.textContent;

Example: http://jsfiddle.net/XnL7H/1/

Answer 5

Assuming you know how to get an element in JavaScript with out jQuery.

var el = document.getElementById("my-element");

And then you just have to use two properties that are available for each element innerText and innerHTML. So to get the text you use:

var text = el.innerText;

Or to get HTML, you do:

var html = el.innerHTML;