Looking to duplicate an HTML element and assign new values to its child elements? Here's my current HTML structure:
<div id="avator" class="avator" style="display:none">
<label><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f1f3e0fff8f2e3d6f1fbf7fffab8f5f9fb">[email protected]</a></label>
<i class="fa fa-close"></i>
</div>
I'd like to clone this element, update its CSS, and modify the label content. My jQuery script currently reads as follows:
$(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");
});
});
However, it doesn't seem to be updating the value within the label element as intended.