向createElement对象添加任意信息

Question

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

创建一个按钮

  

var btn = document.createElement（“BUTTON”）;

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

  

btn.myOwnInformation = [“one”，“two”，“three”]

Answer 1

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

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

使用split;

获取数据

以下是一个示例：jsFiddle

Answer 2

如果你尝试，这当然有效，但由于一些原因，它通常是气馁的：

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

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

• 浏览器兼容性
  当数据附加到DOM对象时，旧浏览器（IE 6/7）可能会泄漏内存。它现在不是一个问题，但由于浏览器提供的JavaScript对象（＆＃34;主机对象＆＃34;）不太可控，我建议避免扩展它们（或它们的原型），除非你知道你的＆＃ 39;重新做。

出于这些原因，像jQuery这样的库使用单独的结构来存储任意数据（以及事件处理程序）并将它们与DOM元素相关联。出于同样的原因，jQuery在jQuery对象中包装选定的DOM节点，而不是使用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

（对不起，我没有足够的声誉来使用推荐）