JQuery复制HTML并在添加到html主体之前编辑其内容。

Question

我有一个包含如下输入字段的输入字段：

 <div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow"

<div class="flex flex-row space-x-4 pb-5">
    <div class="relative z-0 w-full mb-5">
        <input type="text" id="f_name" name="f_name" placeholder="Enter Name here"
            required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
        <label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
    </div>
    
    <div class="flex z-0 w-full justify-end">
        <input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here"
            required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
        <label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
    </div>
</div>

在jQuery中，我复制上面的div (按一下按钮)，并附加到主html主体上，它将显示在原来的#datarow div下面。以下是我在程序中的全部代码片段。

​

$("#btn_addsector").click(function () {
    var div = document.getElementById("datarow"),
        clone = div.cloneNode(true);
 
     //neither of the lines work
     $(clone).find("#f_name").text = "Tisha";
    $("#maincontent").append(clone);
    $(clone).find("#f_name").text = "Tisha";
    $(clone).find("#f_name").text("Tisha");
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontent" >
<button id="btn_addsector"
        class="bg-transparent hover:bg-secondary-dark text-secondary-dark font-semibold hover:text-white py-2 px-4 border border-secondary-dark hover:border-transparent rounded">
        Add Sector
    </button>
 
 <div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow">

    <div class="flex flex-row space-x-4 pb-5">
        <div class="relative z-0 w-full mb-5">
            <input type="text" id="f_name" name="f_name" placeholder="Enter Name here" value="Hannah"
                required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
            <label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
        </div>
        
        <div class="flex z-0 w-full justify-end">
            <input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here" value="Smallville"
                required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
            <label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
        </div>
    </div>
</div>

</div>

​

我可以让克隆的div正确地附加，但是它不会改变输入字段的文本。

Answer 1

您的代码有多个问题：

1:不能有多个ID相同的元素，请使用类。因此，我删除了id="f_name"并将其添加到类选择器class="the previous classes f_name"中

2:要设置输入的值，必须使用.val()而不是.text()

$(clone).find(".f_name").val("Tisha");

Demo

​

$("#btn_addsector").click(function() {
  var div = document.getElementById("datarow"),
    clone = div.cloneNode(true);

  //neither of the lines work
  $(clone).find(".f_name").val("Tisha");
  $("#maincontent").append(clone);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontent">
  <button id="btn_addsector" class="bg-transparent hover:bg-secondary-dark text-secondary-dark font-semibold hover:text-white py-2 px-4 border border-secondary-dark hover:border-transparent rounded">
        Add Sector
    </button>

  <div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow">

    <div class="flex flex-row space-x-4 pb-5">
      <div class="relative z-0 w-full mb-5">
        <input type="text" name="f_name" placeholder="Enter Name here" value="Hannah" required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none f_name" />
        <label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
      </div>

      <div class="flex z-0 w-full justify-end">
        <input type="text" name="f_dest" placeholder="Enter Destination here" value="Smallville" required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none f_dest" />
        <label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
      </div>
    </div>
  </div>

</div>

​