javascript - How to clone input with jQuery - Stack Overflow

admin管理员组

文章数量:1279177

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

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

• javascript
• jquery

Share Improve this question Follow edited Sep 9, 2015 at 15:03 iwazovsky asked Sep 9, 2015 at 14:51 iwazovskyiwazovsky 1,93733 gold badges2121 silver badges3737 bronze badges 5

• 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 Commented Sep 9, 2015 at 14:55
• api.jquery./clone – Andrey Commented Sep 9, 2015 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 Commented Sep 9, 2015 at 14:56
• 2 possible duplicate of How to get html of cloned element – rnevius Commented Sep 9, 2015 at 14:56
• 1 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 Commented Sep 9, 2015 at 15:25

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

What about

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

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);

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());

The method your are looking for is clone()

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./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

本文标签： javascriptHow to clone input with jQueryStack Overflow