$.append before changing $.prop('name')? (name attribute not showing in Chrome "Elements")

Question

I'm dynamically constructing elements for recurring html.

I'm creating a display:table, and all seems to be going well, but when I change the name of an element before it's been $.append()ed, it doesn't show up in Chrome "Elements" and cannot be later selected by jQuery; however, before $.append()ing, the $.prop('name') can be alert()ed.

Should the dynamically constructed element be $.append()ed before changing $.prop('name')?

Code sample:

$.fn.appendSingleRecordInsert = function(paramaterObject) {
    return this.each(function () {
        var $appendDiv = $('<div/>')
        ...
        $.each(paramaterObject.rows, function(rowKey, rowValue){
            var $rowDiv = $('<div/>');
            $.each(rowValue.columns, function(columnKey, columnValue){
                var $columnDiv = $('<div/>');
                if(typeof columnValue.name !== 'undefined'{
                    $columnDiv.prop('name', columnValue.name);
                }
                ...
                $rowDiv.append($columnDiv);
            })
            $appendDiv.append($rowDiv);
        });
        $(this)[paramaterObject.domInsertMethod]($appendDiv);
    });

Answer 1

You can try attr instead of prop. The "attribute selector" selects based on attributes, not properties. In order to do something like $("div[name=... you must set the attribute, not the property.

It should be noted though that name is not a valid attribute on a div.

Answer 2

The name property is not applicable to <div> elements - they have no name attribute. Because of that, the property change you're doing will not be reflected in the attribute values (DOM inspector).

You should use an id or a class instead if you need a selector.