使用JQuery插入XML会将属性更改为小写

Question

我正试图通过jquery(1.6.1(使用以下行插入一些html：

$('#myElem').html(htmlString);

这个htmlString变量包含一些包含属性的HTML，例如：

<div myCustomAttribute="1">...</div>

当插入XML，检查页面上的元素时，我看到以下内容：

<div mycustomattribute="1">...</div>

这是有原因的吗？我该如何避免这种情况的发生？

点击此处查看fiddle 中的示例

编辑：不幸的是，我无法真正将其更改为使用data属性(应该是这样(，因为我正在处理一个现有的系统，该系统有大量的javascript来检查这个特定的属性名称。由于各种原因，重命名属性也会导致现有数据中断。

Answer 1

data-*属性用于存储页面或应用程序专用的自定义数据。

data-*属性使我们能够在所有HTML元素上嵌入自定义数据属性。

然后，存储的(自定义(数据可以在页面的JavaScript中使用，以创建更具吸引力的用户体验(无需任何Ajax调用或服务器端数据库查询(。

数据-*属性由两部分组成：

属性名称不应包含任何大写字母，并且必须在前缀"data-"之后至少有一个字符长属性值可以是任何字符串注意：用户代理将完全忽略以"data-"为前缀的自定义属性。请参阅链接！

Answer 2

当jQuery对元素进行解析并用小写(作为有效的html(重写时，元素上的所有属性都更改为小写。

HTML规范有一个用于自定义属性的特定标记。

用data-:为属性做准备

<div data-myCustomAttribute="1">...</div>

使用jQuery时，它不会修改data-*属性的大小写。

您可以使用jQuery:读取和写入属性

$('div').data('myCustomAttribute') // == 1

或

$('div').data('myCustomAttribute', 2)
// Which will create
<div data-myCustomAttribute="2">...</div>

您还可以使用CSS通过元素的data-属性来选择元素，并将样式应用于它们：

[data-myCustomAttribute='1'] {
font-size: 22px;
}

有关更多css示例，请参阅此处。

Answer 3

当jQuery对元素进行解析并用小写(作为有效的html(重写时，元素上的所有属性都更改为小写。无论是什么情况，你都可以从实际中获得价值。

function insertHtml() {
	var someHtml = '<div myAttr="1">Inspect me to see my attribute</div>';
$('#target').html(someHtml);
}
$('#getValue').on('click', function(){
	alert($('#target div').attr('myattr'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button onclick='insertHtml()'>
Insert HTML
</button>
<div id='target'>

</div>
<button id="getValue">
getvalue
</button>

Answer 4

解决方案是以下javascript，它以区分大小写的方式附加到元素：

var newElem = $.parseXML(data).documentElement;
myObj.append(newElem);