jQuery .html() does not copy contents of textareas or inputs

Question

I'm trying to copy the contents of an element using elem.html() but it's not including the contents of inputs or textareas.

Here's an example (try writting in the boxes then click "Copy"): http://jsfiddle.net/gAMmr/2/

Is there a way of copying all info?

These are the approaches I have tried so far:

elem.clone() - not suitable for my task because it copies the element itself
elem.children().clone() - misses out text nodes
elem.contents().clone() - doesn't include the textarea contents

EDIT: The results seem to be different in each browser. I'm using Chrome.

Strangely enough, it seems to copy the contents just fine in IE8. — Blazemonger, Sep 12 '11 at 18:02
Do you need a string (HTML source code) or a *NodeList* (an array of DOM nodes)? — Šime Vidas, Sep 12 '11 at 18:07
@Nick Yes, it appears that `$( textarea ).clone()` doesn't include the text from the original TEXTAREA element. I'll investigate... — Šime Vidas, Sep 12 '11 at 18:12
@Nick Bug ticket is here: http://bugs.jquery.com/ticket/3016 It seems that there's still no solution to this... — Šime Vidas, Sep 12 '11 at 18:17

score 5 · Accepted Answer · answered Sep 12 '11 at 18:07

5

$("button").click(function () {
    $("#2").html($("#1").html());
    $("#1").find("input").each(function(idx) {
        $("#2").find("input").eq(idx).val($(this).val());
    });
    $("#1").find("textarea").each(function(idx) {
        $("#2").find("textarea").eq(idx).val($(this).val());
    });
});

http://jsfiddle.net/gAMmr/5/

answered Sep 12 '11 at 18:07

Blazemonger

90,923
26
142
180

3

@mblase I **strongly recommend against** `$("#2").html($("#1").html())`. Do this instead: `$('#1').contents().clone().appendTo('#2');` – Šime Vidas Sep 12 '11 at 18:13
@Nick `$("#2").html($("#1").html())` - this will serialize (stingify) the *NodeList* that represents the children of `#1`, only to parse that HTML string back into a *NodeList* in order to attach those nodes to the `#2` element. This process can be compared to having a digital signal converted to an analog signal, and than back to a digital signal. You don't wan to do that. To avoid serialization / deserialization, clone the elements. – Šime Vidas Sep 12 '11 at 18:24
@mblase No, that's not the reason. [Read here](http://stackoverflow.com/questions/7392930/why-should-y-innerhtml-x-innerhtml-be-avoided) why it should be avoided. – Šime Vidas Sep 12 '11 at 20:45
Sime: I like how you went to ask all of SO how to contradict me. :-) – Blazemonger Sep 12 '11 at 20:46
is the `clone()` still not fixed in jQuery? I don't understand https://bugs.jquery.com/ticket/3016 – basZero Feb 09 '17 at 09:18

score 3 · Answer 2 · answered Aug 10 '12 at 08:06

As Šime Vidas pointed out earlier, this is a 4-year old bug which hasn't been corrected, though a fix exists which is quite simple to apply:

-Download jquery.fix.clone.js
-Include it in your page: <script src='path/to/jquery.fix.clone.js'></script>

From then on cloned textarea elements should include the text of their source (note: you need to use the .clone() method to create your new textarea, not .html()).

score 2 · Answer 3 · answered Sep 12 '11 at 18:02

2

Inputs don't contain HTML, they have values. Use .val() for form elements.

answered Sep 12 '11 at 18:02

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 4 · answered Sep 12 '11 at 18:03

0

How about checking the type of the element you're trying to grab the inner text from and if it's an input or textarea use $.text() instead of $.html()

answered Sep 12 '11 at 18:03

Bassem

3,135
2
25
41

jQuery .html() does not copy contents of textareas or inputs

4 Answers4

Linked