{"id":1747,"date":"2013-01-11T19:06:50","date_gmt":"2013-01-12T00:06:50","guid":{"rendered":"http:\/\/www.rexfeng.com\/blog\/?p=1747"},"modified":"2013-01-11T19:06:50","modified_gmt":"2013-01-12T00:06:50","slug":"how-jquery-text-method-works-in-javascript","status":"publish","type":"post","link":"https:\/\/www.rexfeng.com\/blog\/2013\/01\/how-jquery-text-method-works-in-javascript\/","title":{"rendered":"How jQuery text method works in JavaScript"},"content":{"rendered":"

jQuery<\/a> 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.<\/p>\n

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

foobar<\/span><\/div>\n

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

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

foobar<\/span><\/div>\n

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

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

foobar<\/span><\/div>\n

$(‘#test’).html(); \/\/=> returns ‘foobar<\/span>‘
\n[\/cc]<\/p>\n

Before we dive into the jQuery source, we can guess that jQuery uses textContent<\/a>.<\/p>\n

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

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].<\/p>\n

[cci]jQuery.access[\/cci] on line 784 allows jQuery to determine if the value is defined or undefined<\/a>.<\/p>\n

If undefined, [cci]jQuery.text( this )[\/cci] runs.<\/p>\n

[cc]
\n \/\/ line 5348:
\n jQuery.text = Sizzle.getText;
\n[\/cc]<\/p>\n

Sizzle’s getText looks like:<\/p>\n

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

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

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

You can see that jQuery either returns the string with [cci]textContent[\/cci]<\/p>\n

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

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

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

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<\/a> to allow your passed in param to show up.<\/p>\n

[cc]
\n this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
\n[\/cc]<\/p>\n

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

[cc]<\/p>\n

lion<\/div>\n

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

This targets the [cci]#test[\/cci] div and get the text content.<\/p>\n

[cc]<\/p>\n

<\/div>\n

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

This is one way to set the div contents to display ‘pizza’.<\/p>\n

Thanks for tuning into to another jQuery without jQuery. Diving into the source code<\/a> is great for helping you understand how it all works.<\/p>\n

jQuery without jQuery<\/a> is a series that aims to open up the jQuery<\/a> black box. jQuery is just JavaScript, so you should feel comfortable working at lower levels of abstraction and looking at the jQuery source code<\/a> written in JavaScript.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1029],"tags":[1024,1046,1023,1054,1053,1059],"class_list":["post-1747","post","type-post","status-publish","format-standard","hentry","category-programming","tag-html","tag-javascript","tag-jquery","tag-js","tag-sizzle","tag-text"],"_links":{"self":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/1747","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/comments?post=1747"}],"version-history":[{"count":9,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/1747\/revisions"}],"predecessor-version":[{"id":1756,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/1747\/revisions\/1756"}],"wp:attachment":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/media?parent=1747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/categories?post=1747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/tags?post=1747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}