what not to do with jQuery .data()

.data() apparently doesn't SET data in the html element data- (though this, in my opinion, is quite unclear from the documentation). So this shows what does work....

by Matt Rummler

HTML

<div id="mainDiv">
    in the main div
    <table id="table1" border="1">
    </table>
</div>

JavaScript

var table=$('#mainDiv #table1');
function injectSomeElements(targetElement)
{
    var row=$('<tr>',{'id':'tr'+0});
    var dataItem=$('<td>',{'class':'clickToLoad','id':'dataItem1'});
    dataItem.text('this is the dataItem');
    dataItem.data('testdataitem1','dataItemValue withjQuery .data()');
    dataItem.attr('data-testdataitem2','dataItemValue withjQuery .attr()');
//    var itemData=dataItem.dataset;
//    dataItem.dataset.testdataitem='valueSet withoutjQuery';
//    alert('the dataset count: '+itemData.columns);
    dataItem.appendTo(row);
    row.appendTo(targetElement);
//    alert('youve reached the end of injectSomeElements');
}
injectSomeElements(table);
//*
function showMeDataAttribs()
{
    var dataItem=document.querySelector('#dataItem1');
    var data=dataItem.dataset;
    data.anewitem='value of anewitem';
    console.log(dataItem);
    alert('the following should be the data that was placed into data-testdataitem1 using .data: '+data.testdataitem1+' now to test the second one set by .attr: '+data.testdataitem2);
    alert('This should be the value of the new dataItem set using the DOM dataset syntax:  '+data.anewitem);
}
showMeDataAttribs();
//*/