如何使用jQuery迁移输入框(Input)并保留其输入值？

使用.html()方法获取的是元素初始的HTML结构，用户在输入框中填写的内容会存在DOM元素的value属性里，并不会更新到元素的innerHTML中，所以复制过去的是一个未携带已填值的空输入框。

方案1：使用jQuery的.clone()方法 #

.clone()会复制元素的当前状态（包括用户输入的value值），直接将克隆后的元素插入目标容器：

$("#myButton").click(function(){
    // 清空目标容器后插入克隆的元素
    $(".element2").empty().append($(".element1").children().clone());
});

完整代码示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="element1">
    <input type="text" placeholder="enter something then clone it!"/>
</div>
<div class="element2"></div>
<button id="myButton">click to clone</button>

方案2：手动同步输入框的value值 #

如果一定要用.html()方法，可以先把输入框的当前value值同步到它的value属性中，再复制HTML：

$("#myButton").click(function(){
    // 先将输入框的当前值同步到value属性
    $(".element1 input").attr("value", $(".element1 input").val());
    // 再复制HTML到目标容器
    $(".element2").html($(".element1").html());
});

内容的提问来源于stack exchange，提问作者erfanilaghi