How to clone input with jQuery

Question

I try to clone input field, but all I can do is to grab the value.

Here is the jsFiddle

When I try to do $('#input').html() i got and empty string.

I know that the answer is somewhere on the surface, but I can't find it. Please help.

EDIT I DO NOT NEED a value. I said - i can do it. I need to CLONE the input as HTML. What here is not understandable?
EDIT 2 I tried to clone an element and get html with this:

$('#text').clone().html()

but it returns an empty value too. Although if I try to get a val:

$('#text').clone().val()

It returns a value normally

It's still not clear what you need. What are you doing with the cloned HTML? Why can't you just use `.clone()` to clone the element? — rnevius, Sep 09 '15 at 14:55
Be polite man we are not obligated to help you. If you can't precise your problem then fault is by your side not ours. — Robert, Sep 09 '15 at 14:56
possible duplicate of [How to get html of cloned element](http://stackoverflow.com/questions/6821591/how-to-get-html-of-cloned-element) — rnevius, Sep 09 '15 at 14:56
Sorry me for being rude. I do not like when people's only reaction to vote down the question after they've read it poorly. — iwazovsky, Sep 09 '15 at 15:25

score 4 · Answer 1 · edited May 23 '17 at 11:58

4

As answered on this answer... You can use Javascript to get the outerHTML.

var inputHTML = $('#input')[0].outerHTML;

Then you can use that variable wherever you need to on the page!

Hope that helps!

EDIT: You can do this purely using jQuery, again, an answer on the above linked question...

$.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
};

var inputHTML = $("#input").outerHTML());

edited May 23 '17 at 11:58

Community

1
1

answered Sep 09 '15 at 14:56

Matt Maclennan

1,266
13
40

it is closer to the what I need, but how to do it in jQuery? Since it is easier to change attributes and values using jQuery – iwazovsky Sep 09 '15 at 15:04
Thank you for the answer. It is that, what I needed. Since my question caused violent reaction, I couldn't find the answer by @rnevius. Thanks again! – iwazovsky Sep 09 '15 at 15:12
No worries @eatmypants! – Matt Maclennan Sep 09 '15 at 15:12

score 4 · Answer 2 · answered Sep 09 '15 at 15:04

4

I think that's what you're trying to do :

<input id='test' value='10201' />
<p id="input-text"> Hello </p>

Then in jQuery :

var inputField = $('#test').clone();
$('#input-text').html(inputField);

answered Sep 09 '15 at 15:04

Rob

41
2

1

clone() returns and object. How to convert it to pure HTML string? – iwazovsky Sep 09 '15 at 15:08
If you want its html it will be `var inputFieldHtml = inputField[0]` – Rob Sep 09 '15 at 15:13

score 3 · Accepted Answer · edited Sep 09 '15 at 15:34

3

What about

$('#input-text').html($('#test').clone().removeAttr('value'));

edited Sep 09 '15 at 15:34

rnevius

26,578
10
58
86

answered Sep 09 '15 at 15:20

Dharmendra

66
2

thank you a lot. I like your answer more than I've checked as right one, because it doesn't make any workarounds like "wrap('
')". – iwazovsky Sep 09 '15 at 15:27

score 2 · Answer 4 · answered Sep 09 '15 at 14:56

2

The method your are looking for is clone()

answered Sep 09 '15 at 14:56

KamilD

163
1
7

Alexander Dixon · Answer 5 · 2015-09-09T16:02:05.803

Using the .clone() method to the specific DOM element will extract the HTML(everything about it gets duplicated, raw) inherently.

$("#test").clone().appendTo("#input-text").removeAttr('value');
$("input:eq(1)").attr("id", "test_02");

input {
  margin-left: 3px;
  border: solid 1px #ACE;
  width: 3.05em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id='test' value='10201' />
<p id="input-text">Hello</p>

The .attr() method was added only to raise awareness of the one pitfall of utilizing the .clone() method - that being, it duplicates the id of the DOM element which is not best practice or even allowed in standard HTML programming. The best pratice in this case, would probably be to create a unique class that you know, will only deal with that specific DOM element so it can be duplicated as you like.

Additional Resources
» Fiddle Example
» clone() API
» appendTo() API
» Class VS ID

How to clone input with jQuery

5 Answers5