How to add data to the added node

[bas-a]

@troolee
How can I add a data object, or just an extra property to a widget when i create a new one via the addWidget function? The only way I know how is to add it to the data-attribute in the dom. Like this:
grid = $('.grid-stack').data('gridstack');
grid.addWidget($('<div><div class="grid-stack-item-content"></div>'), x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id).attr({"data-custom-id": customId})

Best way would be to add some more properties via the addWidget function. I want to access them via the node of the element in Javascript.

EDIT:
I think I fixed my problem by the following code:

grid.grid.nodes = GridStackUI.Utils.sort(grid.grid.nodes)
let lastWidget = _.last(grid.grid.nodes)
lastWidget.customDataObject = {
name: "John",
surname: "Doe"
}

Is this the correct way of adding data to the widget node object?

[radiolips]

@bas-a The first parameter of addWidget is the element you're adding. If you'd like to add data to it, just do so directly on the element. For example:
grid.addWidget($('<div data-custom-id="4" data-name="John" data-surname="Doe"><div class="grid-stack-item-content"></div>');

[bas-a]

@radiolips thank you for your answer. This is a good way of adding a little bit of data like I asked in my original question. But what if I want to add a more complex data object to the widget? I can't use the data attribute for large objects. How would you suggest I solve that?