Jquery .html() how to get all html

Question

I use this JQuery to create some elements:

var form = $(document.createElement("form"));
form.prop({"action":"/DoSomething", "method": "POST"});
var input = $(document.createElement("input"));
input.prop({"type": "image", "src": "someUrl.png"});
form.append(input);

I now want to get the entire html string that is generated by all that so:

<form action="/DoSomething" method="POST"><input type="image" src="someUrl.Png" /></form>

So that I can pass it through some other Javascript functions!

However, doing form.html() obviously only shows this:

<input type="image" src="someUrl.Png" />

So how do you get all the html?

EDIT

Yeah I can see that this is a duplicate, when I first wrote it, I had no idea what I was trying to achieve or the atleast the name given to what I was trying to achieve.

score 1 · Answer 1 · answered Sep 05 '13 at 13:31

1

You can use:

form.wrap('<div />').parent().html()

to work across all browsers or

form[0].outerHTML

if you don't really care about older Firefox versions (< 11)

answered Sep 05 '13 at 13:31

dcro

13,294
4
66
75

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

One solution:

Create a temporary element, then clone() and append():

$('<div>').append($('#xxx').clone()).html();

See more answers here: https://stackoverflow.com/questions/5744207/jquery-outer-html

edited May 23 '17 at 11:56

Community

1
1

answered Sep 05 '13 at 13:22

RyanS

3,964
3
23
37

score 0 · Answer 3 · answered Sep 05 '13 at 13:23

0

check out this

form[0]

you need the element it self not wrapped version so just use the index 0

answered Sep 05 '13 at 13:23

Mohsen

269
1
3

This returns the element, not its HTML string. – Barmar Sep 05 '13 at 13:34

score 0 · Answer 4 · answered Sep 05 '13 at 13:23

0

var outer_html = $('selector').clone().wrap('<p>').parent().html();

answered Sep 05 '13 at 13:23

0x_Anakin

3,229
5
47
86

score 0 · Answer 5 · answered Sep 05 '13 at 13:27

0

You can simply use the DOM element, rather than a jQuery object, and get outerHTML...

In your code it would be...

form[0].outerHTML;

http://jsfiddle.net/6ugyS/1/

answered Sep 05 '13 at 13:27

Reinstate Monica Cellio

25,975
6
51
67

score -1 · Answer 6 · answered Sep 05 '13 at 13:20

-1

Just use the containg element of form

form.parent().html()

answered Sep 05 '13 at 13:20

NimChimpsky

46,453
60
198
311

2

Take into accoun that your answer may add other items to the html. – Sebastian Neira Sep 05 '13 at 13:21

Jquery .html() how to get all html

6 Answers6