javascript - 如何输出 jQuery 对象的完整 HTML，包括数据？

Question

我正在尝试使用 jQuery 构建一些 HTML，我想稍后获取 HTML 字符串。我添加的内容之一是一些背景 data()，我相信它会转换为元素的 data-* 属性。这是一个例子:

var test = $("<div></div>");
test.data("foo", "bar");
var test2 = $("<div></div>");
test.text("blah");
test2.append(test);
console.log(test2.html());

不幸的是，当我将 HTML 输出到日志时，我得到以下信息:

<div>blah</div>

但不是“foo”数据。是否有一个 API 调用可以输出 jQuery 对象的 HTML，包括其中设置的任何数据？

Answer 1

数据将为您拥有的对象设置一个值 - test在你的例子中，不是渲染的html。我相信您正在寻找的是 attr

明白我的意思 -

var test = $("<div></div>");
test.attr("foo", "foo");
test.attr("bar", "bar");
var test2 = $("<div></div>");
test.text("blah");
test2.append(test);
console.log(test2.html());

在控制台中 - 现在显示为 <div foo="foo" bar="bar">blah</div> ;.这是 fiddle 示例 - https://jsfiddle.net/wx38rz5L/3849/

您可以将第一个或第二个参数更改为您想要的任何内容。第一个参数是名称，第二个参数是值，所以如果您这样做:

test.attr('data-test', 'my value!'); 

你最终会得到

<div data-test="my value!">

您可以阅读有关 jquery 的更多信息 attr在这里 - http://api.jquery.com/attr/