JQuery: Get HTML As Well As Input Values

I'm trying to have a variable store the HTML in a div tag, but simply using var a = $('div').html() doesn't store the values of the input tags that lie within the div. So, my ques

Solution 1:

You could $.clone() the element.

var $a = $("div:first").clone();

$a.appendTo("body"); // Clone invades your body

Online Demo: http://jsbin.com/obebov/edit

Solution 2:

You may also achieve this by first changing the value of input fields uding DOM like this:

$('div input').each(function(){
    $(this).keyup(function(){
        $(this).attr('value',$(this).val());
    });
});

after which you can extract the HTML by using this:

$('div').html();

Solution 3:

If the document having Ajax content, the best solution would be:

$(document).on("keyup change", "input", function () {
    $(this).attr("value", $(this).val());
});

You must use both change and keyup event.