Why are jQuery set attributes not reflected in .html()?

I am trying to set some attributes on HTML snippets. The purpose is to repopulate a form with previous inputed values. I set attributes with .attr() but after I do a .html(), I do not see my changed attributes.

I have done a basic example here http://jsfiddle.net/ejanderson4/CSYnU/

My function looks like this:

function setValue(html,value,name){
    var element=$(html);
    $(element).find(开发者_运维问答"[name='"+name+"']").attr('value',value)
    return element.html();
}

It is setting it, but for reasons unknown to me, you can't directly query the value attribute of an input element. You need to call .val() on that element to get it.

Updated your example here

parse the html string using $.parseXML and then set the attr value

var html="<div><label id='el_c5c0f78656138c39c5eb91a9bf1d3bf6'> table input 1 </label><input type='text' value='' name='table_input_1' class='select-mini' id='table_input_1' /></div>";

var value= 'xxxxxxxxxxxxx';

var name='table_input_1';

    function setValue(html,value,name){

        var xml = html,
        xmlDoc = $.parseXML( xml ),
        $xml = $( xmlDoc ),
        $title = $xml.find( "[name='"+name+"']" );
    $title.attr("value",value);
        //var element=$(html);
        //element.find("[name='"+name+"']").attr('value',value)

        return $title.attr("value");
    }

    alert(setValue(html,value,name));

here is the working fiddle http://jsfiddle.net/CSYnU/4/

also this solution requires you to use jquery version 1.5.2 and higher

update

sry for overdoing it in your scenario you have to do

function setValue(html,value,name){
    var element=$(html);
    $(element).find("[name='"+name+"']").attr('value',value);

    return $(element).find("[name='"+name+"']").attr('value');
}

here is the fiddle http://jsfiddle.net/CSYnU/5/

you are wrapping the html in $(html) then there is no need to again wrap the cached html in $

var element = $(html);
element.find ...

see here http://jsfiddle.net/CSYnU/6/

I think the short answer here is that setting an attribute on a DOM object does not necessarily change what the browser returns for innerHTML. If you want to retrieve a particular attribute, then you should just retrieve that attribute directly.

You also have an error in your code (which jQuery might be tolerating). You've already turned element into a jQuery object so you don't need to do that again with $(element).find, you can just use element.find.

function setValue(html,value,name){
    var element=$(html);
    element.find("[name='"+name+"']").attr('value',value)
    return element.html();
}

Depend on your code, the first problem is about element variable. It doesn't denote "table_input_1" element. To get this element, you should replace by :

var element=$(html).find("[name='"+name+"']");

The second problem is in the your return statement. Since you changed the value of input element, you have to get this value by method val() or attr('value') rather than html(). The html() method is used to get the content inside tags of a element, but in this case value is a attribute, not content.

return element.attr('value'); // element.val();

Here is the complete code:

function setValue(html,value,name){
    var element=$(html).find("[name='"+name+"']");
    element.attr('value',value); // element.val(value);
    return element.attr('value'); // element.val();
}

One reason is that the jQuery attr method gets confused between HTML attributes and DOM properties. The imlpementation of setAttribute and getAttribute was (probably still is) buggy in IE, so in general forget about HTML attributes and use DOM properties.

In most browsers, modifying the HTML attribute (say using setAttribute) will modify the related DOM property. But in many browsers, changing the DOM property will not modify the HTML attribute.

Further, some browsers will modify an element's innerHTML based on the current DOM property, others will use the HTML attribute (which might have a different value in most browsers). HTML 5 is the first attempt to standardise the behaviour of innerHTML, note that it is not a W3C standard yet and is not consistently implemented.

The best approach is to be consistent and always set DOM properties to the values you want. Expect that an element's innerHTML may be inconsistent across browsers.

Setting the current value of an input element doesn't change the initial value, which is what the value attribute is.

There is no property to change the initial value, so you can't alter the HTML code that way.

Edit:

If you want to use the elements in the page, then just make the function return a jQuery object containing the elements instead of returning HTML code:

function setValue(html, value, name){
  var elements = $(html);
  elements.find("[name='"+name+"']").val(value)
  return elements;
}

Adding the elements to the page works the same as using a string. Example:

var html = '<div><input type="text" name="city" /></div>';
$('#SomeForm').append(setValue(html, 'York', 'city'));