JQuery 复制 HTML div 并在附加到 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（单击按钮时）并只是附加到将显示在原始 #datarow div 下方的主要 html 正文。这是我在程序中的完整 sn-p。

$("#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");

演示

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