$(':input').text('something') throw error in IE

[laubstein]

I know, .text() does not change the value of inputs (.val() do that), but just IE throw an exception.

​http://jsfiddle.net/laubstein/mRZ5Z/

[dmethvin]

Yes, because you are trying to add a text node to an input and inputs cannot have child elements.

[laubstein]

Yes, I know that, but the point is: when I make the tests using IE, I have an exception within the jQuery (line 5114).

I can think in two solutions:

• More generic (.append method)
  • FROM

    /* 5113 */ if ( this.nodeType === 1 ) {
    /* 5114 */     this.appendChild( elem );
    /* 5115 */ }
    

  • TO

    /* 5113 */ if ( this.nodeType === 1 && this.nodeName !== 'INPUT' ) {
    /* 5114 */     this.appendChild( elem );
    /* 5115 */ }
    

  • OR

    /* 5113 */ if ( this.nodeType === 1 ) {
    /* 5114 */     try {
    /* 5115 */         this.appendChild( elem );
    /* 5116 */     } catch (e) {}
    /* 5117 */ }
    

• More specific (.text method)
  • FROM

    /* 5042 */ return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
    

  • TO

    /* 5042 */ return this.empty().each(function() {
    /* 5043 */     $(this).not(":input").append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
    /* 5044 */ });
    

Both solutions works... but using the "more specific" solution we can have the same DOM tree on IE, FF, Chrome, etc.

[dmethvin]

I do not understand the "same DOM tree" comment. It is incorrect to attempt to append DOM elements to an input. A DOM tree with child elements on an input is an invalid document. I don't think we need to add checks for that.

[laubstein]

When I wrote "same DOM tree", I was trying to say that:

• Using FF, Chrome and Opera:
  • The code

    $('#myInput').text('something');
    

  • Produces

    <input type="text" id="myInput">something</input>
    

• Using IE:
  • The code

    $('#myInput').text('something');
    

  • "Produces" (throw error and don't change the input)

    <input type="text" id="myInput" />
    

I have updated the fiddle: ​http://jsfiddle.net/laubstein/mRZ5Z/1/

Thanks

[dmethvin]

I can't really blame IE for throwing an error, rather than producing an invalid document. IE is trying to send a message here ... listen to it: <input> elements cannot have children.

[laubstein]

Dave,

did you read that the exception has occurred inside the jQuery file (line 5114 called from 5042)?

This problem came to me because a co-worker tried to do something like that:

// "left" is a generic css class (text-align: left)
$('.left').text('');

We have already fixed using:

$('.left').not(':input').text('');
$(':input.left').val('');

Just for curiosity... I looked in jQuery 1.5.1 source code and have found 3 "try..catches" that just prevent's IE from throwing an error:

• lines 2474 and 2498 - prevent IE from throwing an error for some elements with some event types, see #3533
• line 5802 - Wrapped to prevent IE from throwing errors when 'invalid' values are provided, Fixes bug #5509
• line 6094 - #8138, IE may throw an exception when accessing a field from document.location if document.domain has been set. (extra, because the catch block has some code)

Yes, I know that <input> (and some others) elements cannot have children =). (​http://www.w3.org/TR/html4/index/elements.html and ​http://dev.w3.org/html5/spec/Overview.html)

Thank you!

[anonymous]

I have this same problem in IE 8.

[dmethvin]

That's because you're not supposed to do that. Use .val() instead.