设置克隆元素jQuery的nth-child（n）值

Question

我想克隆一个html元素并将值设置为其子元素。我的html元素是这样的。

<div id="avator" class="avator" style="display:none">
   <label>[email protected]</label>
   <i class="fa fa-close"></i>
</div>

我想克隆它并更改克隆的CSS并为标签设置一些值。我的jQuery代码，

  $(document).ready(function () {
      $("#addEmailBtn").click(function () {
        var email = $("#emailInput").val();
        var $clone = $("#avator").clone();
        $clone.children(':nth-child(0)').val(email);
        $clone.css("display", "block");
        $clone.appendTo("#participantsDiv");
     });
  });

但未在标签上设置值。

Answer 1

标签没有值，仅用于输入元素。使用.text()。

您不需要:nth-child(1)，只需使用.eq(0)。

$(document).ready(function() {
  $("#addEmailBtn").click(function() {
    var email = $("#emailInput").val();
    var $clone = $("#avator").clone();
    $clone.children().eq(0).text(email);
    $clone.show();
    $clone.appendTo("#participantsDiv");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="avator" class="avator" style="display:none">
  <label>[email protected]</label>
  <i class="fa fa-close"></i>
</div>

Email: <input id="emailInput" type="text">
<input type="button" id="addEmailBtn" value="Add email">
<br>
Participants:
<div id="participantsDiv"></div>