向 createElement 对象添加任意信息

Question

这个w3schools page 提到了HTML DOM createElement() 方法。例如，您可以通过

创建一个按钮

var btn = document.createElement("BUTTON");

现在，我想在此按钮上附加一些信息。什么是合适的方法？如果我想附加数组["one", "two", "three"]，我可以这样做吗

btn.myOwnInformation = [“一”、“二”、“三”]

?

Answer 1

您可以使用 html5 数据属性向 DOM 元素添加任意数据。

btn.setAttribute('data-array','one,two,three');

使用split取回数据；

这是一个例子：jsFiddle

Answer 2

如果您尝试，这当然可以，但通常不鼓励这样做，原因如下：

• 关注点分离
  DOM 用于显示结构和逻辑，因此任何其他类型的数据最好单独存储。

• 与未来 DOM 规范的冲突
  如果您选择将来成为标准的属性或方法名称怎么办？您的代码在未来的浏览器上可能会出现错误。

• 浏览器兼容性
  将数据附加到 DOM 对象时，旧浏览器 (IE 6/7) 可能会泄漏内存。现在问题不大了，但是由于浏览器提供的 JavaScript 对象（“宿主对象”）不太可控，我建议避免扩展它们（或它们的原型），除非你知道自己在做什么。

出于这些原因，像 jQuery 这样的库使用单独的结构来存储任意数据（以及事件处理程序）并将它们与 DOM 元素相关联。出于同样的原因，jQuery 将选定的 DOM 节点包装在 jQuery 对象中，而不是直接使用 append、css 等方法扩展 DOM 接口。

相关问题和参考资料

• Storing data in the DOM
• Javascript DOM: Setting custom DOM element properties
• What’s wrong with extending the DOM
• Can I just make up attributes on my HTML tags?
• Jquery data() storage
• Storing custom data in dom elements
• I know its bad to store data in the DOM, but why?

Answer 3

如果你愿意使用 jQuery

有一个功能可以满足你的要求

jQuery.data()

代码可以这样写：

var $btn = $('<input type="button" value="buttonName">');
$btn.data('keyName',["one", "two", "three"]);  //insert data
var getData = $btn.data('keyName');  //get data by keyName

（对不起，我没有足够的声望来使用表扬）