javascript - jQuery:克隆输入值及其样式

Question

我正在尝试将我在第一个 div 上输入的值及其 CSS 附加到另一个 div。这是我的 HTML 代码:

<div id="d1">
<input type="text" id="txt-initial" style="font-family: Verdana; font-size: 48px"/>
<input type="button" id="btn-clonetext" Value="clonetext">
</div>

<div id="d2" style="border:solid 1px; height: 400px; width: 400px; margin: 10px;">
</div>

这是我的 JS 代码:

$('#btn-clonetext').click(function(){
$('#d2').append($('#txt-initial').val());
})

如果我使用克隆，值会被复制，文本框也会被复制；如果我使用 val，则会复制值但不会复制其样式。

但 val().clone() 似乎不起作用。有什么帮助吗？谢谢!

Answer 1

下面的可以帮到你，但是必须要说这是完全没有必要的。您可以简单地提供一个类名并通过 CSS 添加样式。

$('#btn-clonetext').click(function() {
  var $a = $('<div/>').text($('#txt-initial').val()).attr('style',$('#txt-initial').attr('style'))
  $('#d2').append($a);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="d1">
  <input type="text" id="txt-initial" style="font-family: Verdana; font-size: 48px" />
  <input type="button" id="btn-clonetext" Value="clonetext">
</div>

<div id="d2" style="border:solid 1px; height: 400px; width: 400px; margin: 10px;">
</div>