如何使用 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

Answer 1

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

Answer 2

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

Answer 3

关于什么

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

Answer 4

您正在寻找的方法是clone()

Answer 5

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