javascript - 为什么我无法访问此输入文本的内容

Question

最终我的目标是将一个 div 移到另一个 div 旁边，所以我所做的是将 html 保存在一个变量中，并使用 jquery 中的“after”函数将其放置在正确的位置。它的工作原理只是文本框的内容(用户必须写入的内容)没有与其余内容一起复制。

然后我尝试直接访问 html，即使我在文本框中写了一些东西，我也没有在 html 中得到它。

var totalHtml = $("div#my-div-1").html()

但是，如果我编写以下内容，我可以访问文本框的内容:

$("div#my-div-1 input[type=text]").value

那为什么我调用html就获取不到呢？以及如何复制整个 html 以及该输入(和其他输入)的内容？

Answer 1

尝试将第一个参数“withDataAndEvents”设置为 true 进行克隆。 https://api.jquery.com/clone/

$('#copy').on('click', function() {
  let original = $('.div1').first(),
    myCopy = original.clone(true),
    originalSelects = original.find('select'),
    myCopySelects = myCopy.find('select');

  myCopySelects.each(function(i, obj) {
    $(obj).val(originalSelects.eq(i).val());
  });
  $('body').append(myCopy);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <p>Paragraph text here...</p>
  <input>
  <select>
    <option selected="selected" value="1">One</option>
    <option value="2" >Two</option>
    <option value="3">Three</option>
   </select>

  <select>
    <option value="1">One</option>
    <option selected="selected" value="2" >Two</option>
    <option value="3">Three</option>
    </select>
</div>

<p>
  <button id="copy">Copy</button>
</p>