Tag Archives: jquery

How jQuery text method works in JavaScript

jQuery has a popular method for accessing the text contents of a targeted DOM node named [cci].text()[/cci]. It allows you to either get the text content or set the text content.

For example, using [cci]text()[/cci] on [cci]$(‘#test’)[/cci] returns [cci]foobar[/cci] below:
[cc]

foobar

$(‘#test’).text(); //=> returns ‘foobar’
[/cc]

By using [cci]text()[/cci] with a parameter, you can set the text to the passed in parameter.
[cc]

foobar

$(‘#test’).text(“cupcakes”); // sets the value to ‘cupcakes’
$(‘#test’).text(); //=> returns ‘cupcakes’
[/cc]

There is a similar jQuery method named [cci]html()[/cci]. It returns the html contents within the targeted DOM node.
[cc]

foobar

$(‘#test’).html(); //=> returns ‘foobar
[/cc]

Before we dive into the jQuery source, we can guess that jQuery uses textContent.

In the jQuery source, you can see on line 5702:
[cc]
jQuery.fn.extend({
text: function( value ) {
return jQuery.access( this, function( value ) {
return value === undefined ?
jQuery.text( this ) :
this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
}, null, value, arguments.length );
},
[/cc]

jQuery checks the passed in parameter [cci]value[/cci] using a ternary operator. If [cci]value[/cci] is [cci]undefined[/cci], then jQuery calls [cci]text[/cci]. Else, jQuery sets the value with [cci]createTextNode[/cci].

[cci]jQuery.access[/cci] on line 784 allows jQuery to determine if the value is defined or undefined.

If undefined, [cci]jQuery.text( this )[/cci] runs.

[cc]
// line 5348:
jQuery.text = Sizzle.getText;
[/cc]

Sizzle’s getText looks like:

[cc]
/**
* Utility function for retrieving the text value of an array of DOM nodes
* @param {Array|Element} elem
*/
getText = Sizzle.getText = function( elem ) {
var node,
ret = “”,
i = 0,
nodeType = elem.nodeType;

if ( nodeType ) {
if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
// Use textContent for elements
// innerText usage removed for consistency of new lines (see #11153)
if ( typeof elem.textContent === “string” ) {
return elem.textContent;
} else {
// Traverse its children
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
ret += getText( elem );
}
}
} else if ( nodeType === 3 || nodeType === 4 ) {
return elem.nodeValue;
}
// Do not include comment or processing instruction nodes
} else {

// If no nodeType, this is expected to be an array
for ( ; (node = elem[i]); i++ ) {
// Do not traverse comment nodes
ret += getText( node );
}
}
return ret;
};
[/cc]

You can see that jQuery either returns the string with [cci]textContent[/cci]

[cc]
// Use textContent for elements
// innerText usage removed for consistency of new lines (see #11153)
if ( typeof elem.textContent === “string” ) {
return elem.textContent;
}
[/cc]

or jQuery will traverse the DOM and append them into the [cci]ret[/cci] variable (initialized as as empty string) to return.

[cc]
// Traverse its children
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
ret += getText( elem );
}
[/cc]

If you are passing in a param value into [cci]text()[/cci], then jQuery will empty out the contents of the targeted DOM node and use createTextNode to allow your passed in param to show up.

[cc]
this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
[/cc]

If you are interested in using Core JavaScript to replicate jQuery’s [cci]text()[/cci], you could try the following:

[cc]

lion

var div = document.querySelectorAll(“#test”);
div[0].textContent; //=> returns ‘lion’
[/cc]

This targets the [cci]#test[/cci] div and get the text content.

[cc]

var div = document.querySelectorAll(“#test”);
div[0].appendChild(document.createTextNode(‘pizza’));
[/cc]

This is one way to set the div contents to display ‘pizza’.

Thanks for tuning into to another jQuery without jQuery. Diving into the source code is great for helping you understand how it all works.

jQuery without jQuery is a series that aims to open up the jQuery black box. jQuery is just JavaScript, so you should feel comfortable working at lower levels of abstraction and looking at the jQuery source code written in JavaScript.

jQuery DOM ready handlers

As you work with JavaScript & jQuery, you will quickly get accustomed to wrapping your JS scripts with a DOM ready check. You generally want to do this, because you don’t want your DOM-manipulating JS to run before the DOM is fully loaded.

The standard jQuery ready function is:

[cc]
$(document).ready(function(){
// Your code here
});
[/cc]

If you’ve seen the jQuery ready shortcut, you can also use this (equivalent to the above):

[cc]
$(function() {
// Your code here
});
[/cc]

How does this work? Diving into jQuery source, you can see on line 173 that jQuery checks if what is passed in is a function and applies [cci]ready[/cci] to it:

[cc]
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
[/cc]

Also, I want to show how you could wrap your JS code without jQuery. Traditionally, it looks like this:

[cc]
window.onload = function(){
// Your code here
}
[/cc]

Note the traditional way using [cci]window.onload[/cci] will happen later than jQuery’s [cci]ready[/cci] event. Code snippets to run your JS upon DOM ready without jQuery are available online.

Finally, if you want to wait for both the DOM and complete page (including all frames, objects and images) to be loaded using jQuery, you can use:

[cc]
$(window).load(function() {
// Your code here
});
[/cc]

Running JS with jQuery upon DOM ready is simple. Using the jQuery ready shortcut is easy and works well.

jQuery without jQuery is a series that aims to open up the jQuery black box. jQuery is just JavaScript, so you should feel comfortable working at lower levels of abstraction and looking at the jQuery source code written in JavaScript.