Question

请参阅 - https://jsfiddle.net/QLfxs/142/

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

克隆一个按钮。此克隆按钮附加在文本框内。附加按钮不可见。为什么？以及如何让它可见？输入框就像一个黑洞！

Answer 1

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

相当于

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

忽略结束输入标记</input>。因此，当您尝试在<input>元素中添加按钮时，它将不会显示。

以下是JSFiddle的链接。

了解更多here。

Answer 2

您正在输入DOM中附加克隆按钮，这是不正确的。

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

JS中的

附加到div

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

像this

一样

Answer 3

您不能将元素附加到输入元素，使用 after() 方法附加到元素旁边。

＆＃13;

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

＆＃13;

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

＆＃13;

或使用 insertAfter() 方法。

＆＃13;

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

＆＃13;

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

＆＃13;

参考：What is innerHTML on input elements?

Answer 4

你不能向input元素追加任何内容。如果你在jquery中使用.after或.before会更好。所以，你的解决方案将是：

$("#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 - 附加按钮不可见

4 个答案: