How can I output full HTML of jQuery object, including the data?

Question

I am trying to use jQuery to build up some HTML, for which I would like to later get the HTML string. One of the things I am adding is some background data(), which I believe translates to the data-* attributes of the element. Here is an example:

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

Unfortunately, when I output the HTML to the log, I get this:

<div>blah</div>

but not the "foo" data. Is there an API call that will output the HTML for a jQuery object, including any data that has been set in it?

The data is a property set on the DOM object and not an attribute of the html. [Some good reading here](http://stackoverflow.com/q/5874652/561731) — Naftali, Sep 20 '16 at 15:12
@PitaJ that will not get any of the DOM properties that have been set... — Naftali, Sep 20 '16 at 15:12
He'll have to convert the jQuery data to data attributes first, then — PitaJ, Sep 20 '16 at 15:14
If you're trying to set the attr on the html you should try `selector.attr('key, 'value')` — ajmajmajma, Sep 20 '16 at 15:17
Or just not use jQuery's data function in the first place. `test.attr("data-foo", "bar");` isn't much longer. — PitaJ, Sep 20 '16 at 15:17

score 2 · Accepted Answer · answered Sep 20 '16 at 15:21

Data will set a value on the object you have there - test in your example , not the rendered html. What I believe you are looking for is attr

See what I mean here -

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());

In the console - this now reads like <div foo="foo" bar="bar">blah</div>;. Here it is in fiddle example - https://jsfiddle.net/wx38rz5L/3849/

You can change the first or second arguments to whatever you want. The first argument is the name, and the second argument is the value, so if you did :

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

You'd end up with

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

You can read more about jquery attr here - http://api.jquery.com/attr/

score 0 · Answer 2 · answered Sep 20 '16 at 15:20

0

This will do what you desire:

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

answered Sep 20 '16 at 15:20

n1ru4l

488
1
10
29

score 0 · Answer 3 · answered Sep 20 '16 at 15:24

Using the .data() method doesn't create an actual data-info attribute. to set an attr use .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>

How can I output full HTML of jQuery object, including the data?

3 Answers3