JQuery duplicate HTML div and edit its content before appending to html body-CodePudding

I have a that contains some input fields like so:

 <div  id="datarow"

<div >
    <div >
        <input type="text" id="f_name" name="f_name" placeholder="Enter Name here"
            required  />
        <label for="f_name" >Name</label>
    </div>
    
    <div >
        <input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here"
            required  />
        <label for="f_dest" >Destination</label>
    </div>
</div>

And in jQuery I am duplicating the above div (on button click) and just appending to the main html body which would be displayed just below the original #datarow div. Heres the full snippet as how I have in my program.

$("#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"
        >
        Add Sector
    </button>
 
 <div  id="datarow">

    <div >
        <div >
            <input type="text" id="f_name" name="f_name" placeholder="Enter Name here" value="Hannah"
                required  />
            <label for="f_name" >Name</label>
        </div>
        
        <div >
            <input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here" value="Smallville"
                required  />
            <label for="f_dest" >Destination</label>
        </div>
    </div>
</div>

</div>

I can get the cloned div to appended properly but it does not alter the text of the input field.

CodePudding user response：

There is multiple problem with your code:

1: You can't have multiple elements with the same ID, use class for this. So I've removed the id="f_name" and added it to the class selector

2: To set the value of an input, you have to use .val() and not .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" >
        Add Sector
    </button>

  <div  id="datarow">

    <div >
      <div >
        <input type="text" name="f_name" placeholder="Enter Name here" value="Hannah" required  />
        <label for="f_name" >Name</label>
      </div>

      <div >
        <input type="text" name="f_dest" placeholder="Enter Destination here" value="Smallville" required  />
        <label for="f_dest" >Destination</label>
      </div>
    </div>
  </div>

</div>