Question

我正在尝试使用以下行通过jquery（1.6.1）插入一些html：

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

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

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

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

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

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

Click here to see an example of this in fiddle

编辑：不幸的是，我无法真正更改它以使用data属性（应该如此），因为我正在使用的现有系统上正在使用大量的javascript检查该特定属性。名称。由于各种原因，重命名该属性还会导致现有数据中断。

Answer 1

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

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

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

data- *属性由两部分组成：

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

Answer 2

当jQuery解析元素时，元素上的所有属性都更改为小写，并以小写形式将其重写（作为有效的html）。

HTML规范具有custom attributes的特定标记。

在属性上加上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）。无论哪种情况，您都可以从实际中获得价值。

{
    "Name": "Taj Mahal",
    "AddressLine": "Tajganj",
    "City": "Agra",
    "State": "Uttar Pradesh",
    "PhoneNumber": "1234 12344",
    "Latitude": "27.173891",
    "Longitude": "78.042068"
}

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'));
});

Answer 4

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

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

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

4 个答案: