$("div").data("superhero_two","spiderman");

is the right syntax. But when inspecting, I'm only seeing data-superhero_two="spiderman" (as intended). The attribute from .attr is set in the dOM, and the .data is set in the JQuery object only.

By the way, use the document ready function to ensure its execution at the right time:

$(document).ready(function() {
    $("div").data("superhero_two","spiderman");
});

$("div").data("superhero_two","spiderman");

is the right syntax. But when inspecting, I'm only seeing data-superhero_two="spiderman" (as intended). The attribute from .attr is set in the DOM, and the .data is set in the JQuery object only.

By the way, use the document ready function to ensure its execution at the right time:

$(document).ready(function() {
    $("div").data("superhero_two","spiderman");
});