CODEWITHSUNDEEP
javascriptjquery
FrankDraws
FrankDraws

Reputation: 385

jQuery .html vs .text

I have the following:

var myArray = [];
myArray.push("one", " two");
document.getElementById("write").innerHTML = myArray;

Which outputs: one, two

Thought I'd try it with jQuery:

$("#write").html(myArray);

And I got: one two

It left out the comma.

Why?

I've seen someone suggest that .html() should be used over .innerHTML() and that it works the same, but if the jQuery version is leaving out small details, what's the point?

Then I found this post which says "However, the .text() function will change the (text) value of the specified element, but keep the html structure."

Is this why .text() seems to work better than .html() in this particular case? Because .text() keeps the structure?

Upvotes: 2

Views: 1762

Answers (4)

Shlomi Hassid
Shlomi Hassid

Reputation: 6596

After looking at the jQuery source - the .html() method will use the innerHTML method only if the passed value is a string and if its valid html ( validated by some other internal methods). Otherwise the method calls the append() method which treats the array as a sequence of elements or html strings to append and that's why you don't see the comas.

With a string (valid html) html() use:

elem.innerHTML = value;

If an exception was thrown or you passed an array:

this.empty().append( value );

which will loop through the array and append the elements.

You want to use .html() only with safe code that should be treated as HTML valid code. Otherwise use text() which will strictly treat the value passed as text even if it is valid html.

Upvotes: 1

Andrey
Andrey

Reputation: 60065

First thing, if you want to output data the way you want convert it to string yourself, don't guess or rely on how some lib will convert it to string for you.

Second: .text() for plain strings .html() for HTML strings.

Now to answer WHY:

Both .innerHtml and .text just call toString() of whatever you pass there. ['one', 'two'].toString() == 'one,two', .html inspects whatever you pass to it. If it is array it will iterate over it, call toString and concat the results. You can see the handling here: https://github.com/jquery/jquery/blob/1.11-stable/src/manipulation.js#L285

Upvotes: 1

dreamweiver
dreamweiver

Reputation: 6002

JQuery .html() method inturn calls .innerHTML() JavaScript function. Due to which most the time the behaviour should be same with all browsers except IE.

Check this info extracted from http://api.jquery.com/html

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

Check the documentation of .html() from jquery site for more information about the same.

Upvotes: 1

Stumblor
Stumblor

Reputation: 1140

JQuery's html function only accepts strings or a function as it's parameter - and was throwing an error for me when I tried to pass in an array.

If you require the comma to be kept, and are intent or using JQuery (or require more granular control over how the array is output) you are better off converting your array into a string first using .join(), ie:

$("#write").html(myArray.join(", "))

Upvotes: 0

Related Questions