How I can modify HTML document inside my div in jQuery?

This is my code:

$(".lastName").click(function() {
  val = $(".mydiv").clone();
  //then before to append the 'val' in result class, i want it first to modify the label text from 'First Name' to 'Last Name'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
  <label class="label">First Name</label>
  <input type="text" class="myinput">
</div>
<div class="result"></div>
<button class="lastName">Last Name</button

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

With html(), but first get the node with .find('.label') and print in result $('.result').html(val)

$(".lastName").click(function() {
  let val = $(".mydiv").clone();
  $(val).find('.label').html('Last Name');
  //then before to append the 'val' in result class, i want it first to modify the label text from 'First Name' to 'Last Name'
  $('.result').html(val)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="mydiv">
  <label class="label">First Name</label>
  <input type="text" class="myinput">
</div>
<div class="result"></div>
<button class="lastName">Last Name</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>