JQuery not setting 'textcontent' in version 1.7.1

Question

I have the following code which is setting the target, href & textcontent for an element in HTML, this was working perfectly fine in JQuery 1.4.1 & 1.5.1 but after updating to 1.7.1 it does not change the 'textcontent' property of the visible element, the href has been updated.

 $("#uriEmma").attr('textcontent', emmaUri);
 $("#uriEmma").attr('href', emmaUri);
 $("#uriEmma").attr('target', '_blank');

Any ideas why this might be?

Answer 1

You should use .prop() and proper casing: textContent . Example

From documentation:

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

Answer 2

.prop( propertyName )

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex , tagName , nodeName , nodeType , ownerDocument , defaultChecked , and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

Answer 3

textContent is a DOM property, and not a HTML attribute.

In older versions of jQuery, the attr() function would almost always map to a property if the string case was the same as a matching property on the elements. This changed in jQuery 1.6 (as it rightly should have), so now attr() almost exclusively maps to setAttribute and the new function prop() was introduced to set properties on wrapped elements.

Aside from using prop() , you'll also need to ensure your casing is correct. JavaScript and DOM properties use camel casing and start with a lower case letter. So you need to use textContent , rather than textcontent .

Here's a couple of ways you can set the property in jQuery 1.6+:

// Set the first element's `textContent`
$("#someEl")[0].textContent = "test";

// Set every element's textContent
$("#someEl").prop('textContent', "test");

// Set every element's text, mapping to innerText in older browsers:
$("#someEl").text("test");

nb if you want to support IE 8 and lower, you need to use text() or have a suitable test for using innerText instead of textContent .