How to get text inside of container that is not part of children

Question

Let's have html code like this:

<div id="d1"><span>1.</span>Hallo <span>Kitty, </span><div>How are you?</div></div>

It is just example, there may be different children elements inside.

How can I get text inside of d1 container that is not part of children elements?

For the example above it shold be just "Hallo "

Answer 1

this will work for you

$('#d1')
  .contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
}).text()

or you can use this as suggested below for old browser support also

var text = $("#d1").contents().filter( function() {
    return this.nodeType === 3;
}).text();

Demo

Answer 2

http://jsfiddle.net/SGZW4/

var text = $("#d1").contents().filter( function() {
    return this.nodeType === 3;
}).text();