Создание собственного элемента dom с данными, которые будут использовать данные jQuery()

Question

Я хотел бы создать элемент DOM, изначально связанный с ним данными. а затем создать элемент jQuery, установив (автоматически) эти данные, которые будут доступны через функцию data().

var x = document.createElement("div"); 
x. ???? // add the data {a: {x: 4, y:6}} 
x = $(x); 
var obj = x.data("a") 
console.log(a.x); // getting '4' 

это можно сделать - и как?

Обратите внимание, что data-[attrib-name] не будет работать, так как мне нужны сложные данные.

Answer 1

Вы можете использовать $.data() для установки данных на собственном узле DOM в JQuery

var x = document.createElement("div"); 
 

 
$.data(x, 'a', {x: 4, y:6}); 
 

 

 
x = $(x); 
 
var obj = x.data("a") 
 
console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Вы можете установить атрибут data, используя в JavaScript setAttribute() так:

var theDiv = document.createElement("div"); 
theDiv.setAttribute('data-x', '4'); 
theDiv.setAttribute('data-y', '6'); 

доступ к ним:

console.log(theDiv.getAttribute('data-y')); 

А также получить доступ к тем же с JQuery:

$(theDiv).data("x");