Получение содержимого элемента БЕЗ своих детей

У меня есть мягкое предпочтение в решении этого в чистом JS, но если версия jQuery проще, то jQuery тоже прекрасен. Эффективно ситуация такая:

<span id="thisone">
 The info I want
 <span id="notthisone">
  I don't want any of this nonsense
 </span>
</span>

Я действительно хочу получить The info I want
но не
The info I want I don't want any of this nonsense
и я особо не хочу
The info I want <span id="notthisone"> I don't want any of this nonsense </span>
что, к сожалению, я получаю прямо сейчас...

Как мне это сделать?

Ответ 1

Только с js:

Попробуйте: http://jsfiddle.net/g4tRn/

var result = document.getElementById('thisone').firstChild.nodeValue;    

alert(result);

С помощью jQuery:

Попробуйте: http://jsfiddle.net/g4tRn/1

var result = $('#thisone').contents().first().text();  

alert(result);

Bonus:

Если во внешнем <span>, который вы хотите получить, есть другие текстовые узлы, вы можете сделать что-то вроде этого:

Попробуйте: http://jsfiddle.net/g4tRn/4

var nodes = document.getElementById('thisone').childNodes;
var result = '';

for(var i = 0; i < nodes.length; i++) {
    if(nodes[i].nodeType == 3) {       // If it is a text node,
        result += nodes[i].nodeValue;  //    add its text to the result
    }
}

alert(result);

Ответ 2

Если вам просто нужен первый ребенок, тогда он довольно прост. Если вы ищете первый текстовый элемент, этот код будет нуждаться в некоторой модификации.

var text = document.getElementById('thisone').firstChild.nodeValue;
alert(text);

Ответ 3

Вы пробовали что-то вроде этого?

var thisone = $("#thisone").clone();
thisone.children().remove();
var mytext = thisone.html();

Ответ 4

FROM: http://viralpatel.net/blogs/2011/02/jquery-get-text-element-without-child-element.html

 $("#foo")
        .clone()    //clone the element
        .children() //select all the children
        .remove()   //remove all the children
        .end()  //again go back to selected element
        .text();    //get the text of element