jquery.html() returns only first text when loaded from string

Question

Supposedly a jquery object can be initialized from string. This can often happen when processing ajax results, i.e. I'm trying to replicate http://api.jquery.com/jQuery.post/

However, I'm seeing strange behavior:

function test() {
    var content = $("<html><body><div>hello</div><div>world</div></body></html>");
    alert("content.text() = " + content.text());
    alert("content.html() = " + content.html());
}

The first alert shows: content.text() = helloworld

The second alert shows: content.html() = hello

What's happening here?

Solution

Thanks everyone for the explanations. I ended up adding another layer of <div> to have a single child of <body>, as in

<html>
 <body>
  <div>    <=== added
   <div>hello</div>
   <div>world</div>
  </div>
 </body>
</html>

T.J. Crowder · Accepted Answer · 2015-05-03 09:17:25Z

1

When parsing HTML fragments containing a body element, browsers in general (and jQuery does this as well) will disregard everything except what's inside the body element. So what you have there ends up being equivalent to:

var content = $("<div>hello</div><div>world</div>");
alert("content.text() = " + content.text());
alert("content.html() = " + content.html());

You end up with a jQuery object with two elements in it: The div elements.

In jQuery, normally accessor functions (html, val, css, etc.) only use the first element in the set when you use them as getters, and that's what html is doing above. text is an unusual accessor function in jQuery: It gives you the combined text of all of the elements in the set, not just the first.

We can see this in the docs, but it's still surprising. From html:

Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

From text:

Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

(My emphasis in both cases.)

answered May 3, 2015 at 9:17

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rudiger W. Over a year ago

Thanks T.J. At some point I had read all the individual parts of the documentation, but didn't put 1 +1 together.

T.J. Crowder Over a year ago

@RudigerW.: I was really surprised by this behavior of text, I hadn't known about it until I saw your question and said "wait, that doesn't look right." :-) So that's a bug in my future your question helped prevent.

Ram · Accepted Answer · 2015-05-03 09:41:21Z

1

Browsers remove those html and body elements. The content collection has only 2 div elements.

When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as <html>, <title>, or <head> elements. As a result, the elements inserted may not be representative of the original string passed.

This is the string representation of your content collection:

content.map(function() { return this.outerHTML || this.nodeValue; }).get().join('');
// -> <div>hello</div><div>world</div>

.text() method returns textContent/nodeValue of all the elements in the collection:

content.text(); // -> helloworld

.and .html() method returns innerHTML of the first element in the collection:

content.html(); // -> hello

edited May 3, 2015 at 9:41

answered May 3, 2015 at 9:16

Ram

145k16 gold badges174 silver badges201 bronze badges

1 Comment

Rudiger W. Over a year ago

Thanks, @Vohuman. At some point I had read all the individual parts of the documentation, but didn't put 1 +1 together. I would have accepted your answer as it was the first one and has the cool content.map solution, but T.J. Crowder's explanation was a little more thorough.

unconditional · Accepted Answer · 2015-05-03 09:21:18Z

0

This is what your content looks like to a browser:

"content = " Object { 0: <div>, 1: <div>, length: 2 }

Basically this is in some kind a set of 2 elements.

And here's what http://api.jquery.com/html/ say:

Get the HTML contents of the first element in the set of matched elements

answered May 3, 2015 at 9:21

unconditional

7,7641 gold badge20 silver badges33 bronze badges

Collectives™ on Stack Overflow

jquery.html() returns only first text when loaded from string

Solution

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Solution

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related