jQuery - 附加按钮不可见答案

【问题标题】：jQuery - Appended button is not visiblejQuery - 附加按钮不可见
【发布时间】：2016-11-07 03:40:18
【问题描述】：

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

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

【问题讨论】：

您不能将元素附加到输入元素中。
@SinanGuclu- 没有 hacky 解决方案？
@Cyril 的建议。将按钮和输入元素放在
中。然后附加到那个
.
" 元素是空的，它只包含属性" .如果您只想将输入框中的按钮文本显示为值，请尝试$("#x").val($("#y").text())
我已在我的答案中添加了指向您的 jsfiddle 修改版本的链接。

【解决方案1】：

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

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

在JS中追加到div

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

像this那样做

【讨论】：

【解决方案2】：

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

相当于

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

关闭输入标记</input> 被忽略。因此，当您尝试将按钮附加到 <input> 元素内时，它不会出现。

这是JSFiddle的链接。

阅读更多here。

【讨论】：

良好的支持链接

【解决方案3】：

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

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

或使用insertAfter()方法。

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

参考：What is innerHTML on input elements?

【讨论】：

【解决方案4】：

你不能在输入元素上附加任何东西，如果你在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>

【讨论】：