This should be real easy. Given below is the HTML.

<div id='attachmentContainer'>
    #Attachment#
    <span id='spnAttachmentName' class='hidden'>#AttachmentName#</span>
    <span id='spnAttachmentPath' class='hidden'>#AttachmentPath#</span>
</div>  

I want to get just the #Attachment# and not the other text. When I tried

$("#attachmentContainer").text() 

it gives out all #Attachment#, #AttachmentName# as well as #AttachmentPath#. I know I could just put #Attachment# into another span and access it directly but I was just intrigued on how to do this. Any help is much appreciated.

This should be real easy. Given below is the HTML.

<div id='attachmentContainer'>
    #Attachment#
    <span id='spnAttachmentName' class='hidden'>#AttachmentName#</span>
    <span id='spnAttachmentPath' class='hidden'>#AttachmentPath#</span>
</div>  

I want to get just the #Attachment# and not the other text. When I tried

$("#attachmentContainer").text() 

it gives out all #Attachment#, #AttachmentName# as well as #AttachmentPath#. I know I could just put #Attachment# into another span and access it directly but I was just intrigued on how to do this. Any help is much appreciated.

• javascript
• jquery
• jquery-selectors

• This question was already answered here: stackoverflow./questions/1476787/… – Gerald Senarclens de Grancy Commented May 5, 2010 at 19:10
• 1 This might be one of those rare times where breaking out into pure javascript may not be a bad idea ... – James Westgate Commented May 5, 2010 at 19:27
• @James: jQuery is "pure JavaScript" from top to bottom. I'm not sure why people always think that "JavaScript" and "HTML DOM handling" are the same thing. JavaScript is the language, and the DOM is merely one API that is available to it. – Tomalak Commented May 5, 2010 at 20:13
• Yep. It is javascript. But is it pure? No. Its a functional layer to abstract and unify DOM manipulation. – James Westgate Commented May 5, 2010 at 20:19
• @James: To be pedantic, jQuery is pure JavaScript as well, by all definitions of the word "pure". But I understand what you mean. ;) – Tomalak Commented May 5, 2010 at 20:27

6 Answers 6

Since your text happens to be the first child node of the <div>:

var firstChild = $("#attachmentContainer")[0].firstChild;
var textValue  = firstChild.nodeType == 3 ? $.trim(firstChild.nodeValue) : "";

The nodeType check is meant to be a safeguard - it makes sure you are actually handling a text node - the firstChild might be something different after all. React accordingly, this is just an example.

To retrieve the value of all text children (or a specific one), just loop over the childNodes collection of your element, concatenating all bits you find into a string:

// the optional "at" parameter lets you define which text node you want
// if not given, this returns all text nodes concatenated
$.fn.ownText = function(at) { 
  var result = [], node = this[0];
  if (!(node && node.childNodes)) return;
  for (var i=0; i<node.childNodes.length; i++) {
    var child = node.childNodes[i];
    if (child.nodeType != 3) continue;
    var t = $.trim(child.nodeValue);
    if (t != '') result.push(t);
  }
  return at ? result[at-1] : result.join(' ');
}

var text = $("#attachmentContainer").ownText();  // all text children
var text = $("#attachmentContainer").ownText(1); // first text child only

This will get you just that items text

var $item = $("#attachmentContainer").clone();
$item.children().remove(); 
alert($item.text());

clone the object so you don't have to remove the actual items children. Then you can remove the child elements and that will leave the innerText of the item you want.

And here's a handy little method to do this easily

jQuery.fn.trueText = function(obj){
    var $item = $(obj).clone();
    $item.children().remove(); 
    return $item.text();
};

Now you can call $("#attachmentContainer").trueText()

$('#attachmentContainer').contents().filter(function(){return this.nodeType==3;}).text()

Copied from my own answer on a similar thread

This example uses .contents() to get all the children nodes (including text nodes), then uses .map() to turn each child node into a string based on the nodeType. If the node is a text node (i.e. text not within the spans), we return its nodeValue.

This returns a jQuery set containing strings, so we call .get() to get a 'standard' array object that we can call .join() on.

// our 'div' that contains your code:
var $html = $("<div id='attachmentContainer'>\n    #Attachment#\n    <span id='spnAttachmentName' class='hidden'>#AttachmentName#</span>\n    <span id='spnAttachmentPath' class='hidden'>#AttachmentPath#</span>\n</div>");

// Map the contents() into strings
$html.contents().map(function() { 
  // if the node is a textNode, use its nodeValue, otherwise empty string
  return this.nodeType == 3 ? this.nodeValue : ''; 
  // get the array, and join it together:
}).get().join('');

// " 
//     #Attachment# 
//     
//     
// "

If you want to trim extra whitespace, you can use $.trim(this.nodeValue)

If you need to do this a lot, you could even make a plugin (now with some options):

$.fn.directText = function(settings) {
   settings = $.extend({},$.fn.directText.defaults, settings);
   return this.contents().map(function() {
     if (this.nodeType != 3) return undefined; // remove non-text nodes
     var value = this.nodeValue;
     if (settings.trim) value = $.trim(value);
     if (!value.length) return undefined; // remove zero-length text nodes
     return value;
   }).get().join(settings.joinText);
};

$.fn.directText.defaults = {
   trim: true,
   joinText: ''
};

I think the text is actually a text element - a child of the parent div. So you just need to query for the first child. Not sure though. hth

I think the proper well-formed angle would be to put that first part in a <p> </p> (if a span was not appropriate).

I thought I could get a .filter to work on it, but couldn't quite get it...