jQuery - Appended button is not visible

Question

Please refer - https://jsfiddle.net/QLfxs/142/

$("#z").clone().appendTo($("#x"));

A button is cloned. This cloned button is appended inside the text box. The appended button is not visible. Why? and how to get it visible? The input box is acting like a black hole!

What @Cyril has suggested. Put the button and input element within a
. Then append to that
. — Sinan Guclu, Jul 05 '16 at 10:35
"The element is empty, it contains attributes only" .If you want to just display the button text in the input box as value, then try `$("#x").val($("#y").text())` — dinesh, Jul 05 '16 at 10:36
I've added a link to a modified version of your jsfiddle to my answer. — Sinan Guclu, Jul 05 '16 at 10:37

score 1 · Answer 1 · answered Jul 05 '16 at 10:34

1

<input val='xx'> 
<button> button </button>
</input>

Is equivalent to

<input val='xx'></input>
<button> button </button>

The closing input tag </input> is ignored. So when you try and append a button to within the <input> element, it won't appear.

Here is a link to a JSFiddle.

Read more here.

answered Jul 05 '16 at 10:34

Sinan Guclu

1,075
6
16

Good supporting link – dinesh Jul 05 '16 at 10:40

score 0 · Answer 2 · answered Jul 05 '16 at 10:33

0

You are appending the clone button inside the input DOM, which is incorrect.

<input type="text" id="x"/>
<div id="n"></div>
<button id="y"> somesome
</button>

in JS append to the div

 $("#y").clone().appendTo($("#n"));

Do it like this

answered Jul 05 '16 at 10:33

Cyril Cherian

32,177
7
46
55

score 0 · Answer 3 · edited May 23 '17 at 11:58

You can't append element to an input element instead, append next to the element using after() method.

$(document).ready(function() {
  $("#x").after($("#y").clone());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="x"/>
<button id="y">somesome
</button>

or use insertAfter() method.

$(document).ready(function() {
  $("#y").clone().insertAfter('#x');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="x" />
<button id="y">somesome
</button>

Refer : What is innerHTML on input elements?

score 0 · Answer 4 · answered Jul 05 '16 at 10:44

You cannot append anything to the input element, It will be better if you use .after or .before in jquery. So, your solution will be :

$("#x").after($("#y").clone())

$(document).ready(function () {
   $("#x").after($("#y").clone())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="x">
<button id="y"> somesome
</button>

jQuery - Appended button is not visible

4 Answers4