如何輸出jQuery對象的完整HTML，包括數據？

我想用jQuery來構建一些HTML，爲此我想稍後再獲取HTML字符串。我添加的一件事是一些背景數據（），我相信它可以轉化爲元素的數據屬性。這裏有一個例子：如何輸出jQuery對象的完整HTML，包括數據？

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，包括已經設置的所有數據？

來源

2016-09-20 David Whiteman

的數據是DOM對象，而不是在html的屬性設定的屬性。 [一些很好的閱讀]（http://stackoverflow.com/q/5874652/561731） – Neal

'jQuery＃outerHTML（）' – PitaJ

@PitaJ將不會得到已設置的任何DOM屬性... – Neal

數據將設置你那裏的對象的值 - 在你的榜樣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>。這裏是一個小提琴的例子 - https://jsfiddle.net/wx38rz5L/3849/

你可以改變任何你想要的第一或第二個參數。第一個參數是名字，第二個參數是值，所以如果你做的事：

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

你想最終

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

你可以閱讀更多關於jQuery的attr這裏 - http://api.jquery.com/attr/

來源

2016-09-20 15:21:10 ajmajmajma

這將做你的願望：

var test = $("<div></div>"); 
test.attr("data-foo", "bar"); 
var test2 = $("<div></div>"); 
test.text("blah"); 
test2.append(test); 
console.log(test2[0].outerHTML);

來源

2016-09-20 15:20:44 l0rin

使用.data（）方法不會創建實際的數據信息屬性。設置一個ATTR使用.attr（）

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2016-09-20 15:24:25

如何輸出jQuery對象的完整HTML，包括數據？

回答

相關問題