javascript - Get html elements (dynamically generated) with values using jQuery - Stack Overflow

admin管理员组

文章数量:1415673

Is it possible using jQuery to get whole div content(dynamically generated elements) with values? For example, child element may be a div, span, select, or input?

I am trying to save whole div content(generated on fly) with values as .html file. I tried with one div which has form and input elements.

HTML:

<div id="inputs">
    <form class="mainForm">
        <div style="height: 100%;" id="div1">
                <label>Input1</label>
                <input type="text" id="input1" name="input1"/>
        </div>
    </form>
</div>
<input id="addform" type="button" value="Click to add Input"/>
<input id="getform" type="button" value="Click to get html"/>

jQuery:

$(document).ready(function(){
    $("input#addform").click(function(){
        $("div#inputs").append($('form.mainForm').clone().html());
    });

    $("input#getform").click(function(){
        alert($("div#inputs").clone().html());
    });
});

FIDDLE:

/

How to get whole div#inputs content with values (entered by user) On click of Click to get html button?

Help would be appreciated.

P.S: Here I used only one input in form. But in my real case, we do have select, span, image, etc.

Is it possible using jQuery to get whole div content(dynamically generated elements) with values? For example, child element may be a div, span, select, or input?

I am trying to save whole div content(generated on fly) with values as .html file. I tried with one div which has form and input elements.

HTML:

<div id="inputs">
    <form class="mainForm">
        <div style="height: 100%;" id="div1">
                <label>Input1</label>
                <input type="text" id="input1" name="input1"/>
        </div>
    </form>
</div>
<input id="addform" type="button" value="Click to add Input"/>
<input id="getform" type="button" value="Click to get html"/>

jQuery:

$(document).ready(function(){
    $("input#addform").click(function(){
        $("div#inputs").append($('form.mainForm').clone().html());
    });

    $("input#getform").click(function(){
        alert($("div#inputs").clone().html());
    });
});

FIDDLE:

http://jsfiddle/UhJfn/

How to get whole div#inputs content with values (entered by user) On click of Click to get html button?

Help would be appreciated.

P.S: Here I used only one input in form. But in my real case, we do have select, span, image, etc.

• javascript
• jquery
• html
• dynamic

Share Improve this question Follow edited Feb 1, 2015 at 18:28 Deduplicator 45.8k77 gold badges7272 silver badges123123 bronze badges asked Nov 24, 2013 at 18:17 KiranKiran 20.3k1111 gold badges7171 silver badges101101 bronze badges 5

• wouldn't you just need values and types since you already know the html structure? A more real world demo would help – charlietfl Commented Nov 24, 2013 at 18:20
• @charlietfl I just mentioned one div. But we have 10 divs with different html structure. I need to save whole html content as .html file. – Kiran Commented Nov 24, 2013 at 18:23
• seems to me that an array of objects with all the attributes/properties needed to replicate html output would make more sense than relying on browser to modify html and then copy that – charlietfl Commented Nov 24, 2013 at 18:30
• @Oliver Have you checked out my solution.? – Rajaprabhu Aravindasamy Commented Nov 24, 2013 at 18:47
• @RajaprabhuAravindasamy How can we update values for select tag? And select tag options will be dynamic. – Kiran Commented Nov 25, 2013 at 14:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Try this,

You have to explicitly update the value attribute to achieve your need.

$(document).ready(function(){

    $(document).on('keyup','input[type="text"]',function(){
        $(this).attr('value',$(this).val());
    });

    $("input#addform").click(function(){
        $("div#inputs").append($('form.mainForm').clone().html());
    });

    $("input#getform").click(function(){
        alert($("div#inputs").clone().html());
    });
});

DEMO

本文标签： javascriptGet html elements (dynamically generated) with values using jQueryStack Overflow